@media (min-width: 768px) {
	/*
	section#main_image {
		position: relative;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		color: #333;
		margin-top: 80px;
		height: 80vh;
			background-image: url(images/main_image.png);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: right top;
	}
		section#main_image img {
			width: 100%;
			height: auto;
			object-fit: cover;
			object-position: bottom center;
			font-family: 'object-fit: contain;';
		}
	*/
	section#main_image {
		position: relative;
		margin-top: 80px;
		width: 100%;
		height: 35vw;
		z-index: -1;
		color: #333;
	}
		section#main_image .img {
			background-image: url(images/whitening_image.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center top;
			width: 30vw;
			height: 30vw;
			position: absolute;
			left: 50%;
			right: 5vw;
			top: 5vw;
			bottom: 0;
		}
		section#main_image .mask {
			background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(143, 223, 255, 0.5));
			position: absolute;
			top: 0;
			right: 0;
			bottom: 5%;
			left: 50%;
		}

		section#main_image h1 {
			font-size: 24px;
			text-align: left;
			position: absolute;
			top: calc(50% - 2em);
			left: 0;
			right: 45%;
		}
	section#summary {
		margin-top: 40px;
	}
		section#summary .point {
			margin: auto;
			width: 720px;
		}
			section#summary .point h2 {
				display: inline;
				background: #dbd9db;
				font-size: 28px;
				font-weight: normal;
				padding: 4px;
			}
			section#summary dd {
				margin-top: 10px;
				margin-bottom: 40px;
			}
					section#summary .whitening_sample {
						min-height: 240px;
						background-position: left top;
						background-repeat: no-repeat;
						background-size: contain;
						background-image: url("images/whitening_package.png");
					}
					section#summary .whitening_sample p {
						margin-left: 50%;
						background: #c5e2ff;
						color: #36e;
						padding: 20px;
					}
					section#summary .other {
						margin-top: 40px;
						margin-bottom: 40px;
						padding: 20px;
						background-color: #ddd;
						background-position: right top;
						background-repeat: no-repeat;
						background-size: 180px;
						background-image: url("images/icon05.png");
					}
					section#summary .other p {
						margin-right: 30%;
					}
	section#step {
		margin-top: 40px;
	}
		section#step .table {
			display: table;
			width: 90%;
			margin: auto;
		}
			.thead, .tbody {
				display: table-row-group;
			}
				.thead .td{
					border-bottom: solid 1px #333333;
				}
			.tr {
				display: table-row;
				background-position: left top;
				background-repeat: no-repeat;
			}
				.tr.step1 {
					background-image: url(images/step1.png);
					background-position: left 20px;
				}
				.tr.step2 {
					background-image: url(images/step2.png);
				}
				.tr.step3 {
					background-image: url(images/step3.png);
				}
			.thead .td {
				display: table-cell;
				padding-bottom: 20px;
			}
			.tbody .td {
				display: table-cell;
				padding-bottom: 40px;
				padding-left: 10px;
				padding-right: 10px;
			}
			.td.content {
				width: 60%;
				padding-top: 2px;
				padding-left: 54px;
				padding-right: 10px;
			}
				.td.content h2 {
					margin-top: -5px;
					padding: 0;
					font-size: 18px;
				}
				.step1 .td.content {
					padding-top: 35px;
				}
			.td.you {
				width: 20%;
				text-align: center;
				border-left: solid 1px #ff002a;
				border-right: solid 1px #ff002a;
				color: #ff002a;
				position: relative;
			}
				.td.you p {
					line-height: 22px;
					vertical-align: middle;
				}
				.td.you p img {
					width: 22px;
					height: 22px;
					margin-right: 2px;
					vertical-align: middle;
				}
			.td.me {
				width: 20%;
				text-align: center;
			}

			.td.you img.balloon {
				width: 180px;
				height: auto;
				position: absolute;
				top: -100px;
				left: 6px;
			}
}
@media (max-width: 767px) {
	body{
		width: auto;
	}
	section#main_image {
		position: relative;
		margin-top: 80px;
		width: 100%;
		height: 60vw;
		z-index: -1;
		color: #333;
	}
		section#main_image .img {
			background-image: url(images/whitening_image.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center top;
			width: 60vw;
			height: 60vw;
			position: absolute;
			left: 20vw;
			right: 20vw;
			top: 5vw;
			bottom: 5vw;
		}
		section#main_image .mask {
			background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(143, 223, 255, 0.5));
			position: absolute;
			top: 0;
			right: 15vw;
			bottom: 10vw;
			left: 25vw;
		}
		section#main_image h1 {
			font-size: 20px;
			text-align: left;
			background: #fff;
			text-align: center;
			padding: 66vw 0 10vw 0;
		}
	section#summary {
		margin-top: 40px;
	}
		section#summary .point {
			margin: auto;
			width: 80vw;
		}
			section#summary .point h2 {
				display: inline;
				background: #dbd9db;
				font-size: 28px;
				font-weight: normal;
				padding: 4px;
			}
			section#summary dd {
				margin-top: 10px;
				margin-bottom: 40px;
			}

			section#summary .whitening_sample {
				width: 100%;
				padding-top: 48vw;
				background-position: center top;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url("images/whitening_package.png");
			}
			section#summary .whitening_sample p {
				background: #c5e2ff;
				color: #36e;
				padding: 4vw;
			}
			section#summary .other {
				margin-top: 10vw;
				margin-bottom: 10vw;
				padding: 4vw;
				background-color: #ddd;
				background-position: right top;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url("images/icon05.png");
			}
			section#summary .other p {
				margin-right: 50%;
			}



			section#step {
		margin-top: 40px;
	}
		section#step .table {
			display: table;
			width: 90%;
			margin: auto;
			font-size: 14px;
		}
			.thead, .tbody {
				display: table-row-group;
			}
				.thead .td{
					border-bottom: solid 1px #333333;
				}
			.tr {
				display: table-row;
				background-position: left top;
				background-repeat: no-repeat;
			}
				.tr.step1 {
					background-image: url(images/step1.png);
					background-position: left 20px;
				}
				.tr.step2 {
					background-image: url(images/step2.png);
				}
				.tr.step3 {
					background-image: url(images/step3.png);
				}
			.thead .td {
				display: table-cell;
				padding-bottom: 20px;
			}
			.tbody .td {
				display: table-cell;
				padding-bottom: 40px;
				padding-left: 10px;
				padding-right: 10px;
			}
			.td.content {
				width: 50%;
				padding-top: 2px;
				padding-left: 54px;
				padding-right: 10px;
			}
				.td.content h2 {
					margin-top: -5px;
					padding: 0;
					font-size: 18px;
				}
				.step1 .td.content {
					padding-top: 35px;
				}
			.td.you {
				width: 25%;
				text-align: center;
				border-left: solid 1px #ff002a;
				border-right: solid 1px #ff002a;
				color: #ff002a;
				position: relative;
				background: #fff;
			}
				.td.you p {
					line-height: 22px;
					vertical-align: middle;
				}
				.td.you p img {
					width: 22px;
					height: 22px;
					margin-right: 2px;
					vertical-align: middle;
				}
			.td.me {
				background: #fff;
				width: 25%;
				text-align: center;
			}

			.td.you img.balloon {
				width: 100%;
				height: auto;
				position: absolute;
				top: -15vw;
				left: 6px;
			}
}