h1 {
	color: #333;
}

@media (min-width: 768px) {
	#summary {
		position: relative;
		width: 100%;
		min-width: 1072px;
		aspect-ratio: 16 / 9;
		z-index: -1;
		overflow: hidden;
		color: #fff;
		margin-top: 0;
		background: linear-gradient(45deg, #e8dec5 0 10%, #aaa 60% 100%);
	}
		#summary img {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			width: 100%;
			font-family: 'object-fit: contain;';
		}
		#summary .text {
			position: absolute;
			width: 40%;
			height: auto;
			top: 50%;
			left: 0;
			text-align: center;
			margin: 0 auto 1vw auto;
			transform: translateY(-50%) ;
			-webkit- transform: translateY(-50%);
		}
		#summary h1 {
			color: #fff;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 20px;
		}
		#summary p {
			color: #fff;
			text-align: center;
			font-size: 22px;
			width: 60%;
			margin: 0 auto 20px auto;
		}
	section#worries {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#worries p {
			text-align: center;
		}
		section#worries ul {
			width: 960px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 6em 6em;
			gap: 10px;
		}
		section#worries li {
			text-align: center;
			background: #eee;
			position: relative;
		}
		section#worries li p {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(45deg, #e8dec5 0 10%, #eee 60% 100%);
			font-weight: bold;
		}
		section#worries>p {
			margin-top: 20px;
		}
	section#cause {
		padding-top: 80px;
		margin: 0 auto;
		width: 100%;
	}
		section#cause h2 {
			font-size: 2vw;
			text-align: center;
			background: #eee;
			padding: 20px 0;
		}
		section#cause ul {
			margin: 0 auto;
			width: 100%;
			font-size: 0;
			border-top: solid 1px #eee;
			border-bottom: solid 1px #eee;
		}
		section#cause li {
			width: 360px;
			margin: 0px;
			padding: 10px;
			display: inline-block;
			vertical-align: top;
		}
		section#cause li p {
			width: 320px;
			padding: 0 20px;
		}
			section#cause ul li img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		section#cause>p {
			margin: 20px auto;
			text-align: center;
			font-size: 1.6vw;
			color: #d39;
		}
	section#movie {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#movie .iframe {
			text-align: center;
		}
		section#movie iframe {
			margin: 0 auto;
			width: 80%;
			height: auto;
			aspect-ratio: 16 / 9;
		}
	section#whatis {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#whatis h2 {
			margin: 0 auto;
			text-align: center;
			padding-bottom: 20px;
		}
		section#whatis .image {
			width: 960px;
			margin: 20px auto;
		}
		section#whatis p {
			margin: 0 auto;
			width: 80%;
		}

	section#differences {
		padding-top: 80px;
		margin: 0 auto;
	}
		section table {
			width: 960px;
			margin: 20px auto;
			border-collapse: collapse;
			border-spacing: 0;
		}
		section th {
			background: #eee;
			border: solid 1px #888;
			padding: 0.5em;
			width: 28%;
		}
		section td {
			background: #eee;
			border: solid 1px #888;
			padding: 0.5em;
			vertical-align: top;
		}
		section .lafontaine {
			background: #e8dec5;
		}
		section td:first-child {
			background: #fff;
		}

	section#step3 {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#step3 h2 {
			margin: 0 auto;
			text-align: center;
			padding-bottom: 20px;
		}
		section#step3 ul {
			margin: 0 auto;
			width: 960px;
			font-size: 0;
			border-top: solid 1px #eee;
			border-bottom: solid 1px #eee;
		}
		section#step3 li {
			width: 320px;
			margin: 0px;
			display: inline-block;
			vertical-align: top;
			position: relative;
		}
		section#step3 li.step1 {
		}
		section#step3 .image {
			width: 960px;
			margin: 20px auto;
		}
		section#step3 li p {
			padding: 0 20px 10px 20px;
		}
		section#step3>p {
			margin: 20px auto;
			text-align: center;
			font-size: 1.8vw;
			color: #39d;
		}

	section#beforeafter {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#beforeafter ul {
			margin: 0 auto;
			width: 960px;
			font-size: 0;
			border-bottom: solid 1px #eee;
		}
		section#beforeafter li {
			width: 200px;
			height: auto;
			margin: 0;
			padding: 20px;
			display: inline-block;
			vertical-align: top;
		}
		section#beforeafter li h2 {
			font-size: 1.2vw;
			text-align: center;
			background: #eee;
			padding: 10px 0;
		}
		section#beforeafter li p {
			text-align: center;
			padding: 340px 10px 10px 10px;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
		}
			section#beforeafter li.beforeafter1 p {
				background-image: url(./images/beforeafter01.png);
			}
			section#beforeafter li.beforeafter2 p {
				background-image: url(./images/beforeafter02.png);
			}
			section#beforeafter li.beforeafter3 p {
				background-image: url(./images/beforeafter03.png);
			}
			section#beforeafter li.beforeafter4 p {
				background-image: url(./images/beforeafter04.png);
			}

	section#flow {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#flow ul {
			margin: 0 auto;
			width: 960px;
			font-size: 0;
			border-top: solid 1px #eee;
			border-bottom: solid 1px #eee;
		}
		section#flow li {
			width: 320px;
			height: auto;
			margin: 0px;
			padding: 0;
			display: inline-block;
			vertical-align: top;
		}
		section#flow li h2 {
			font-size: 2vw;
			text-align: center;
			background: #eee;
			padding: 0 10px;
		}
		section#flow li p {
			padding: 220px 10px 20px 10px;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
		}
			section#flow li.flow1 p {
				/*background-image: url(./images/flow01.png);*/
			}
			section#flow li.flow2 p {
				background-image: url(./images/flow02.png);
			}
			section#flow li.flow3 p {
				background-image: url(./images/flow03.png);
			}
			section#flow li.flow4 p {
				background-image: url(./images/flow04.png);
			}
			section#flow li.flow5 p {
				background-image: url(./images/flow05.png);
			}
			section#flow li.flow6 p {
				background-image: url(./images/flow06.png);
			}
			section#flow li.flow7 p {
				background-image: url(./images/flow07.png);
			}
			section#flow li.flow8 p {
				background-image: url(./images/flow08.png);
			}
	section#qa {
		padding-top: 80px;
		margin: 0 auto;
	}
		section#qa h2 {
			margin: 0 auto;
			padding-left: 30px;
			padding-bottom: 10px;
			width: 80%;
		}
		section#qa h2:before {
			content: "Q. ";
			color: #39d;
			font-size: 2vw;
		}
		section#qa p {
			margin: 0 auto;
			padding-left: 30px;
			padding-bottom: 20px;
			width: 80%;
		}
		section#qa p:before {
			content: "A. ";
			color: #d39;
			font-size: 2vw;
		}
}


@media (max-width: 767px) {
	h1 {
		font-size: 5vw;
		font-weight: bold;
	}
	p {
		font-size: 4vw;
	}
	body{
		width: auto;
	}
	#summary {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		z-index: -1;
		color: #fff;
		margin-top: 60px;
		position: relative;
	}
		#summary img {
			position: absolute;
			top: 50vw;
			right: 0;
			left: 0;
			width: 100%;
		aspect-ratio: 16 / 9;
			font-family: 'object-fit: contain;';
		}
		#summary .text {
			position: absolute;
			width: 96%;
			height: 7em;
			top: 60px;
			left: 0;
			text-align: center;
			margin: 0 auto 1vw auto;
			transform: translateY(-50%) ;
			-webkit- transform: translateY(-50%);
		}
		#summary .text {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			text-align: center;
			margin: 0 auto 2vw auto;
			color: #333;
		}
		#summary h1 {
			width: 100%;
			text-align: center;
			margin: 0 auto;
		}
		#summary p {
			text-align: center;
			font-size: 4vw;
		}
	section#worries {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#worries p {
			text-align: center;
		}
		section#worries ul {
			width: 96vw;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 6em 6em;
			gap: 1vw;
		}
		section#worries li {
			text-align: center;
			background: #eee;
			position: relative;
		}
		section#worries li p {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(45deg, #e8dec5 0 10%, #eee 60% 100%);
			font-weight: bold;
		}
		section#worries>p {
			margin-top: 2vw;
		}
	section#cause {
		padding-top: 8vw;
		margin: 0 auto;
		width: 100%;
	}
		section#cause h2 {
			font-size: 4vw;
			text-align: center;
			background: #eee;
			padding: 2vw 0;
		}
		section#cause ul {
			margin: 0 auto;
			width: 96vw;
			border-top: solid 1px #eee;
			border-bottom: solid 1px #eee;
		}
		section#cause li {
			margin: 0;
			padding: 1vw;
		}
		section#cause li p {
			padding: 0 2vw;
		}
			section#cause ul li img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		section#cause>p {
			margin: 3.4vw;
			text-align: center;
			font-weight: bold;
			color: #d39;
		}
	
	section#movie {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#movie .iframe {
			text-align: center;
		}
		section#movie iframe {
			margin: 0 auto;
			width: 96%;
			height: auto;
			aspect-ratio: 16 / 9;
		}
		section#movie iframe {
			margin: 0 auto;
		}
	section#whatis {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#whatis h2 {
			margin: 0 auto;
			text-align: center;
			padding-bottom: 2vw;
		}
		section#whatis .image {
			width: 96vw;
			margin: 2vw auto;
		}
		section#whatis .image img {
			width: 96vw;
		}
		section#whatis p {
			margin: 0 auto;
			width: 80%;
		}

	section#differences {
		padding: 8vw 2vw 0 2vw;
		margin: 0 auto;
	}
		.scrollxtable {
			margin: 2vw auto;
			overflow-x: scroll;
		}
		section table {
			border-collapse: collapse;
			border-spacing: 0;
			width: 96vw;
			margin: auto 0;
		}
		section th {
			background: #eee;
			border: solid 1px #888;
			padding: 0.5em;
		}
		section td {
			background: #eee;
			border: solid 1px #888;
			padding: 0.5em;
			vertical-align: top;
		}
		section .head {
			min-width: 8em;
		}
		section .herb, section .chemical {
			min-width: 10em;
		}
		section .lafontaine {
			min-width: 10em;
			background: #e8dec5;
		}
		section td:first-child {
			background: #fff;
		}

	section#step3 {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#step3 h2 {
			margin: 0 auto;
			text-align: center;
			padding-bottom: 2vw;
		}
		section#step3 ul {
			margin: 0 auto;
			width: 96vw;
			font-size: 0;
			border-top: solid 1px #eee;
			border-bottom: solid 1px #eee;
		}
		section#step3 li {
			width: 32vw;
			margin: 0;
			display: inline-block;
			vertical-align: top;
			position: relative;
		}
		section#step3 li.step1 {
		}
		section#step3 .image {
			width: 96vw;
			margin: 2vw auto;
		}
		section#step3 .image img {
			width: 96vw;
		}
		section#step3 li p {
			padding: 0 2vw 1vw 2vw;
		}
		section#step3>p {
			margin: 4vw;
			text-align: center;
			color: #39d;
		}

	section#beforeafter {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#beforeafter ul {
			margin: 0 auto;
			width: 96vw;
			font-size: 0;
			border-bottom: solid 1px #eee;
		}
		section#beforeafter li {
			width: 20vw;
			height: auto;
			margin: 0;
			padding: 2vw;
			display: inline-block;
			vertical-align: top;
		}
		section#beforeafter li h2 {
			font-size: 2.2vw;
			text-align: center;
			background: #eee;
			padding: 1vw 0;
		}
		section#beforeafter li p {
			text-align: center;
			font-size: 2.2vw;
			padding: 34vw 1vw 1vw 1vw;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
		}
			section#beforeafter li.beforeafter1 p {
				background-image: url(./images/beforeafter01.png);
			}
			section#beforeafter li.beforeafter2 p {
				background-image: url(./images/beforeafter02.png);
			}
			section#beforeafter li.beforeafter3 p {
				background-image: url(./images/beforeafter03.png);
			}
			section#beforeafter li.beforeafter4 p {
				background-image: url(./images/beforeafter04.png);
			}

	section#flow {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#flow ul {
			margin: 0 auto;
			width: 96vw;
			font-size: 0;
			border-top: solid 1px #eee;
			border-bottom: solid 1px #eee;
		}
		section#flow li {
			width: 48vw;
			height: auto;
			margin: 0;
			padding: 0;
			display: inline-block;
			vertical-align: top;
		}
		section#flow li h2 {
			font-size: 4vw;
			text-align: center;
			background: #eee;
			padding: 0 1vw;
		}
		section#flow li p {
			padding: 33vw 1vw 2vw 1vw;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
		}
			section#flow li.flow1 p {
				/*background-image: url(./images/flow01.png);*/
			}
			section#flow li.flow2 p {
				background-image: url(./images/flow02.png);
			}
			section#flow li.flow3 p {
				background-image: url(./images/flow03.png);
			}
			section#flow li.flow4 p {
				background-image: url(./images/flow04.png);
			}
			section#flow li.flow5 p {
				background-image: url(./images/flow05.png);
			}
			section#flow li.flow6 p {
				background-image: url(./images/flow06.png);
			}
			section#flow li.flow7 p {
				background-image: url(./images/flow07.png);
			}
			section#flow li.flow8 p {
				background-image: url(./images/flow08.png);
			}
	section#qa {
		padding-top: 8vw;
		margin: 0 auto;
	}
		section#qa h2 {
			margin: 0 auto;
			padding-left: 3vw;
			padding-bottom: 1vw;
			width: 80%;
			font-size: 4vw;
		}
		section#qa h2:before {
			content: "Q. ";
			color: #39d;
			font-size: 4vw;
		}
		section#qa p {
			margin: 0 auto;
			padding-left: 3vw;
			padding-bottom: 2vw;
			width: 80%;
		}
		section#qa p:before {
			content: "A. ";
			color: #d39;
			font-size: 4vw;
		}
}