/*
	基本レイアウト
*/
.contents-wrap .contents {
	padding: 60px 0px 0px 0px;
	position: relative;
}
@media screen and (max-width: 720px) {
	.contents-wrap .contents {
		padding: 80px 0px 0px 0px;
	}
	.pc {
		display: none;
	}
}

.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}

/*
	カスタム変数
*/
:root {
	--amo-color: #BF066E;
	--amo-text-color: #777;
}


@media screen and (min-width: 680px){   
	.pcbr { display:block; }
	.spbr { display:none; }
}
@media screen and (max-width: 680px){   
	.pcbr { display:none; }
	.spbr { display:block; }
}


.tc-white {
	color: white;
}

h1 {
	font-size: 35px;
	font-weight: 700;
	line-height: 50px;
	display:inline;
}
h2 {
	font-size: 25px;
	font-weight: 600;
	line-height: 50px;
	display:inline;
}
h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 50px;
	display:inline;
}
h3.sub {
	font-size: 20px;
	font-weight: 600;
	line-height: 50px;
	display:inline;
	color: rgba(255, 0, 0, 1);
}
h4 {
	font-size: 15px;
	font-weight: 500;
	line-height: 30px;
	display:inline;
}
p.subtitle {
	font-size: 16px;
	line-height: 1.6;
	padding-bottom: 5px;
}
p.text {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.7);
	line-height: 1.8;
}
p.note {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.6);
	line-height: 16px;
}

@media screen and (max-width: 720px) {
	h1 {
		font-size: 25px;
		font-weight: 700;
		line-height: 30px;
		display:inline;
	}
	h2 {
		font-size: 20px;
		font-weight: 600;
		line-height: 25px;
		display:inline;
	}
	h3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 50px;
		display:inline;
	}
	h4 {
		font-size: 13px;
		font-weight: 500;
		line-height: 18px;
		display:inline;
	}
	
	p.subtitle {
		font-size: 16px;
		line-height: 1.6;
		padding-bottom: 5px;
	}
	p.text {
		font-size: 16px;
		color: rgba(0, 0, 0, 0.7);
		line-height: 1.8;
	}
	p.note {
		font-size: 8px;
		color: rgba(0, 0, 0, 0.6);
		line-height: 12px;
	}

	
}



#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	padding: 10px 24px;
	background-color: white;
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	z-index: 8000;
}
#header .header-contents-wrap .header-contents {
	display: grid;
	grid-template-columns: 50% 50%;
}
#header .header-contents-wrap .header-contents a {
	display: inline-block;
	text-decoration: none;
	color: black;
}
#header .header-contents-wrap .header-contents img {
	width: 200px;
}

#header .header-contents-wrap .header-contents .left {
	position: relative;
	top: 10px;
}

#header .header-contents-wrap .header-contents .sub_logo {
	font-size: 10px;
	position: relative;
	top: -5px;
}

#header .header-contents-wrap .header-contents .right {
	padding-right: 50px;
	text-align: right;
	position: relative;
	top: 10px;
}

#header .header-contents-wrap .header-contents .right .tel {
	padding-right: 10px;
}
#header .header-contents-wrap .header-contents .right img {
	width: 18px;
}
#header .header-contents-wrap .header-contents .right .number {
	font-size: 25px;
	font-weight: 600;
}
#header .header-contents-wrap .header-contents .right .time {
	text-align: right;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.5);
}

.btn01 {
	background: linear-gradient(93.05deg, #9BD066 4.65%, #75CBAC 50.49%, #7CB4E8 95.39%);
	border-radius: 50px;
	color: white;
	padding: 10px 20px;
	font-weight: 500;
	letter-spacing: 3px;
	position: relative;
	top: -15px;
}
.btn01 a {
	color: white;
}

.sp {
	display: none;
}


@media screen and (max-width: 720px) {
	.sp {
		display: block;
	}
	#header {
		font-size: 12px;
		padding: 0px 0px;
		height; 80px;
	}
	#header a span {
		padding: 0px 10px;
	}
	#header .header-contents-wrap .header-contents img:not(.logo) {
		width: 80px;
	}
	#header .header-contents-wrap .header-contents .left {
		margin: auto;
		top: 0;
	}
	#header .header-contents-wrap .header-contents .right
	{
		display: none;
	}
	#header .header-contents-wrap .header-contents span.sub_logo {
		display: block;
		font-size: 14px;
		text-align: right;
		padding-right: 5px;
		padding-top: 5px;
	}
	
	#header .header-contents-wrap .header-contents {
		display: grid;
		grid-template-columns: auto 80px 80px;
	}
	#header .header-contents-wrap .header-contents img.logo {
		width: 180px;
	}
}

/*
	spiner
*/
.spinner {
	margin: 100px auto 0;
	width: 70px;
	text-align: center;
	padding-bottom: 100px;
}
.spinner > div {
	width: 14px;
	height: 14px;
	background-color: #767676;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/*
	modal
*/
.modal {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9990;
}
.modal__bg {
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
	z-index: 9995;
}
.modal__content {
	background: #fff;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 90%;
	max-height: 70vh;
	overflow-y;scroll;
	overflow-x:hidden;
	z-index: 9996;
}
.modal__content .hr {
	border-bottom: 1px solid rgba(204, 204, 204, 0.5);
	margin: 15px 10px 5px 10px;
}


/*
	FORM
*/
form .form-parts {
	padding: 10px 0px 0px 0px;
}
form .form-parts p.title {
	font-size: 13px;
	font-weight: 500;
	padding-bottom: 5px;
}
form .form-parts p.title span {
	font-size: 10px;
	font-weight: 300;
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 0px 5px;
	color: #C60606;
}

.form-parts .infomation {
	padding: 5px 0px 5px 0px;
	line-height: 25px;
	font-size: 20px;
}
.form-parts .infomation.bold {
	font-weight: 600;
}
.form-parts .infomation.line {
	border-bottom: 1px solid black;
}
.form-parts.submit {
	text-align: center;
	padding-top: 20px;
}
.form-parts.float-right {
	text-align: right;
}

.form-parts .all_checked {
	font-size: 10px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 5px;
}


select,
textarea,
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="time"],
input[type="text"],
input[type="number"] {
	font-size: 16px;
	width: calc(100% - 20px);
	padding: 10px 5px;
/* 	background-color: rgba(178, 178, 178, 0.1); */
	border: 1px solid #AEB4B7;
}
.form-parts input[type="checkbox"],
input[type="radio"] {
	display: none;
}
.form-parts input[type="checkbox"] + label,
input[type="radio"] + label {
	padding: 5px 15px;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 25px;
	margin: 10px 0px;
	color: #ccc;
	font-size: 13px;
}
.form-parts input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
	color: white;
	background-color: rgba(0, 0, 0, 1);
	
}
.form-parts select {
	width: 100%;
}

.error_text {
	font-size: 12px;
	color: #C60606;
	padding: 5px 0px;
}

.form-parts input.w-50 {
	width: calc(50vw - 142px);
	
}

@media screen and (max-width: 720px) {
	form .form-parts {
		padding: 20px 0px 0px 0px;
	}
	form .form-parts p.title {
		font-size: 14px;
		padding-bottom: 5px;
	}
	.form-parts .infomation {
		padding: 10px 0px 10px 0px;
		font-size: 25px;
		line-height: 15px;
		margin-bottom: 30px;
	}
	select,
	textarea,
	input[type="tel"],
	input[type="date"],
	input[type="email"],
	input[type="time"],
	input[type="password"],
	input[type="text"],
	input[type="number"] {
		font-size: 16px;
	}
	button {
		font-size: 13px;
	}
	.form-parts input.w-50 {
		width: calc(50vw - 42px);
	}
}

	
/*
	////////////////////
	//
	//	index
	//
	////////
	
*/
	
	.welcom {
		background-image: url('../img/top_img.png');
		background-size: cover;
		padding: 40px 40px 40px 0px;
		height: 600px;
	}
	.welcom > div {
		margin-top: 300px;
		width: 40%;
		padding: 50px 0px 50px 100px;
		background: linear-gradient(93.05deg, #9BD066 4.65%, #75CBAC 50.49%, #7CB4E8 95.39%);
		
	}
@media screen and (max-width: 720px) {
	
	.welcom {
		background-image: url('../img/top_img.png');
		background-size: 200%;
		background-repeat: no-repeat;
		background-position: -250px 0px;
		height: auto;
	}
	.welcom > div {
		margin-top: 200px;
		width: 80%;
		padding: 20px 20px 20px 20px;
		background: linear-gradient(93.05deg, #9BD066 4.65%, #75CBAC 50.49%, #7CB4E8 95.39%);
		
	}
	
	font-family : "Hiragino Kaku Gothic ProN" , sans-serif;
	
		
}

	div.line {
		border-bottom: 3px solid #83C2D7;
		width: 50px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		margin-bottom: 50px;
	}
	
	.content {
		padding: 5%;
	}
	
	
	
	.onayami {
		text-align: center;
	}
	
	.onayami .content01 {
		padding-top: 20px;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
	}
	.onayami .content01 > div {
		padding: 15px;
	}
	.onayami .content01 > div > img {
		object-fit: cover;
		width: 100%;
	}
	
@media screen and (max-width: 720px) {
	.onayami .content01 {
		grid-template-columns: 50% 50%;
	}
	
	div.line {
		margin-bottom: 24px;
	}

}
	
	.about {
		text-align: center;
		padding: 0px 15%;
	}
	
	
	.about .result-wrap {
		margin-top: 50px;
		padding: 5px 5px 5px 5px;
		background: linear-gradient(93.05deg, #9BD066 4.65%, #75CBAC 50.49%, #7CB4E8 95.39%);
	}
	.about .result-wrap .result {
		background-color: white;
		padding: 20px 20px 20px 20px;
		display: grid;
		grid-template-columns: 33.333% 33.333% 33.333%;
	}
	.about .result-wrap .result div {
		padding: 30px 20px 20px 20px;
	}
	.about .result-wrap .result div div {
		padding: 10px 20px;
		text-align: left;
	}
	.about .result-wrap .result div img {
		object-fit: cover;
		width: 100%;
	}
	.about .result-wrap .result h3,
	.about .result-wrap .result > p {
		grid-column: 1 / 4;
		padding: 0;
	}
	.about .result-wrap .result > p {
		font-size: 12px;
		color: rgba(0, 0, 0, 0.6);
		text-align: right;
		padding: 0px 30px 10px 0px;
	}
	.about .result-wrap .result .sp-result {
		display: none;
	}
	
@media screen and (max-width: 720px) {
	
	.about {
		text-align: center;
		padding: 20px 20px;
	}
	.about > p{
		text-align: left;
	}
	.about .result-wrap {
		margin-top: 20px;
		padding: 5px 5px 5px 5px;
		background: linear-gradient(93.05deg, #9BD066 4.65%, #75CBAC 50.49%, #7CB4E8 95.39%);
	}
	.about .result-wrap .result {
		background-color: white;
		padding: 20px 0px 0px 0px;
		grid-template-columns: 100%;
	}
	.about .result-wrap .result > * {
		display: none;
	}
	.about .result-wrap .result div div {
		padding: 10px 40px;
	}
	.about .result-wrap .result .sp-result {
		display: block;
		padding: 10px;
	}
	.about .result-wrap .result .sp-result > div {
		padding: 0px 10%;
	}
	.about .result-wrap .result .sp-result .explain {
		text-align: left;
	}
	
	.about .result-wrap .result .sp-result div {
		text-align: center;
	}
	.about .result-wrap .result .sp-result > p {
		font-size: 12px;
		line-height: 16px;
		color: rgba(0, 0, 0, 0.6);
		text-align: left;
		padding: 10px 0px 10px 0px;
	}
	.about .result-wrap .result .sp-result div.grid2 {
		display: grid;
		grid-template-columns: 50% 50%;
		padding: 0;
	}
	.about .result-wrap .result .sp-result div > img {
		width: 140px;
	}
	.about .result-wrap .result .sp-result div.grid2 img {
		width: 140px;
	}
	.about .result-wrap .result .sp-result div.grid2 div {
		padding: 5px;
	}
}
	
	
	
	.beforeafter {
		padding: 15px 15%;
	}
	.beforeafter .content01 {
		padding: 20px 0%;
		display: grid;
		grid-template-columns: 40% 20% 40%;
		text-align: left;
	}
	.beforeafter h3:before {
		content: '';
		border: 3px solid #B6D97A;
		margin-right: 20px;
	}
	.beforeafter .content01 > div {
		padding: 15px 0px;
	}
	.beforeafter .content01 > div > p {
		padding-bottom: 5px;
	}
	.beforeafter .content01 > div > img {
		object-fit: cover;
		width: 100%;
	}
	.beforeafter .content01 > div:nth-of-type(2) {
		margin: auto;
		position: relative;
		top: 10px;
		right: -25px;
	}
	.beforeafter .content01 > div:nth-of-type(2) > img {
		width: 50%;
	}
	.beforeafter .arrow_sp {
		display: none;
	}
	
@media screen and (max-width: 720px) {
	.beforeafter {
		padding: 15px 20px;
	}
	.beforeafter .content01 {
		grid-template-columns: 100%;
	}
	.beforeafter .arrow_sp {
		display: block;
	}
	.beforeafter .arrow_pc {
		display: none;
	}
}
	
	.means {
		text-align: center;
	}
	.means .content01 {
		display: grid;
		grid-template-columns: 60% 40%;
		padding: 15px 10%;
		text-align: left;
	}
	.means .content01 img {
		object-fit: cover;
		width: 100%;
	}
	.means .content01 > div > h3 {
		display: block;
		padding-top: 20px;
	}
	.means .content01 h3:before {
		content: '';
		border: 3px solid #B6D97A;
		margin-right: 20px;
	}
	.means .content01 > div .sp {
		display: none;
	}

@media screen and (max-width: 720px) {
	.means .content01 {
		grid-template-columns: 100%;
		padding: 15px 0px 40px 0px;
	}
	.means .content01 > div > h3 {
		display: none;
	}
	.means .content01 img {
		padding: 20px 0px 0px 0px;
	}
	.means .content01 > div .sp {
		display: block;
	}
}
	
	.topics {
		background: linear-gradient(93.05deg, rgba(182, 217, 122, 0.77) 4.65%, rgba(158, 199, 237, 0.77) 95.39%) , url('../img/topics_bg.png');
		background-size: cover;
		padding: 5% 15%;
	}
	.topics > div {
		background-color: white;
		text-align: center;
		padding: 60px 120px;
	}
	.topics > div > div.topics_detail {
		display: grid;
		grid-template-columns: 15% 85%;
		text-align: left;
	}
	.topics > div > div.topics_detail > div {
		padding: 10px 10px 10px 30px;
	}
	.topics > div > div.topics_detail img {
		object-fit: cover;
		width: 80%;
		margin: auto;
	}
	.topics > div > div.topics_detail span {
		margin-right: 8px;
	}
	
	.topics > div > div.topics_detail h3 {
		background: linear-gradient(transparent 50%, #FDD959 50%);
	}
	
@media screen and (max-width: 720px) {
	.topics {
		padding: 15px;
	}
	.topics > div {
		padding: 20px 20px;
	}
	.topics > div > div.topics_detail {
		grid-template-columns: 100%;
	}
	.topics > div > div.topics_detail > div {
		padding: 0px 0px 30px 0px;
	}
	.topics > div > div.topics_detail img {
		width: 80px;
	}
}
	
	.aftercare {
		text-align: center;
		padding: 50px 0px 0px 0px;
	}
	.aftercare > div.infomation {
		text-align: left;
		padding: 0px 160px;
		color: rgba(0, 0, 0, 0.7);
	}
	
/*
	.aftercare > div.infomation > p.text:before {
		content: '';
		display: inline-block;
		width: 25px;
		height: 25px;
		background-image: url('../img/check-o.png');
		background-size: contain;
		vertical-align: middle;
		margin-right: 10px;
	}
*/
	.aftercare > div.infomation > p > span.line {
		padding: 0px 5px;
		background: linear-gradient(transparent 50%, #FDD959 50%);
	}
	.aftercare > div.infomation > p > span.line > span {
		font-size: 1.6em;
		font-weight: 600;
	}
	.aftercare img {
		object-fit: cover;
		width: 100%;
		margin-bottom: 10px;
		padding-top: 3px;
	}
	.aftercare .content01 {
		color: rgba(0, 0, 0, 0.7);
		display: grid;
		grid-template-columns: 33.3333% 33.3333% 33.3333%;
		padding: 20px 160px;
	}
	.aftercare .content02 {
		color: rgba(0, 0, 0, 0.7);
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		padding: 20px 80px;
	}
	.aftercare .content04 {
		color: rgba(0, 0, 0, 0.7);
		display: grid;
		grid-template-columns: 25% 50% 25%;
		padding: 20px 80px 0px 80px;
	}
	.aftercare .content01 > div,
	.aftercare .content02 > div 
	{
		padding: 10px;
	}
	.aftercare .content01 > div > p,
	.aftercare .content02 > div > p 
	{
		font-size: 12px;
		padding-bottom: 5px;
	}
	.aftercare .content03 {
		display: none;
	}
	.aftercare .infomation > div {
		display: grid;
		grid-template-columns: 20px auto;
	}
	.aftercare .infomation > div > p {
		padding-left: 5px;
		padding-bottom: 5px;
		font-size: 18px;
		font-weight: 600;
	}
	
	
	.aftercare .content01 img , 
	.aftercare .content02 img , 
	.aftercare .content03 img {
		border: 1px solid #83C2D7;
	}
@media screen and (max-width: 720px) {
	.aftercare {
		padding: 50px 5% 20px 5%;
	}
	.aftercare > div.infomation {
		text-align: left;
		padding: 20px 0px;
		color: rgba(0, 0, 0, 0.7);
	}
	.aftercare > div.infomation > p {
		font-size: 13px;
		line-height: 16px;
	}
	.aftercare .content04 {
		color: rgba(0, 0, 0, 0.7);
		display: grid;
		grid-template-columns: 0% 100% 0%;
		padding: 20px 0px 0px 0px;
	}
	.aftercare .content01 , 
	.aftercare .content02 {
		display: none;
	}
	.aftercare .content03 {
		display: block;
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.aftercare .content03 > div {
		padding: 5px;
	}
	.aftercare .content03 > div > p {
		font-size: 10px;
		padding-bottom: 5px;
	}
	
	.aftercare .infomation > div > p {
		font-weight: 600;
		font-size: 16px;
	}
	.aftercare > div.infomation > p > span.line > span {
		font-size: 1.2em;
		font-weight: 600;
	}
	
}	

	.performance {
		padding: 5% 10%;
		text-align: center;
		position: relative;
	}
	.performance .swiper-container .swiper-wrapper .swiper-slide p.title {
		font-size: 20px;
		padding: 10px 0px 5px 0px;
	}
	.performance .swiper-container .swiper-wrapper .swiper-slide p.detail {
		font-size: 12px;
		padding: 5px 0px;
		color: rgba(0, 0, 0, 0.6);
	}
	
	.swiper-container {
		width: 100%;
	}
	.swiper-container .swiper-slide img {
		object-fit: cover;
		width: 100%;
	}
	.swiper-button-next {
		background-image: url('../img/swiper-right.png');
		background-size: cover;
		background-position: -5px 0px;
		color: rgba(255, 255, 255, 0);
		position: absolute;
		right: 5px;
	}
	.swiper-button-prev {
		background-image: url('../img/swiper-left.png');
		background-size: cover;
		background-position: -2px 0px;
		color: rgba(255, 255, 255, 0);
	}
@media screen and (max-width: 720px) {
	.performance {
		padding: 5% 15px;
	}
	.swiper-button-next ,
	.swiper-button-prev {
		display: none;
	}
}
	
	.price {
		text-align: center;
		padding-bottom: 60px;
	}
	.price .prices {
		display: grid;
		grid-template-columns: 50% 50%;
		padding: 0px 60px 0px 60px;
	}
	.price .prices-wrap {
		margin-top: 20px;
		padding: 3px;
		background: linear-gradient(93.05deg, #9BD066 4.65%, #75CBAC 50.49%, #7CB4E8 95.39%);
		margin: 30px 30px 10px 30px;
	}
	.price .prices-wrap > div {
		background-color: white;
		padding: 20px;
		font-size: 20px;
	}
	.price .prices-wrap > div > p {
		margin-bottom: 15px;
	}
	.price .prices-wrap > div > p:nth-of-type(2) {
		background: linear-gradient(transparent 50%, #FDD959 50%);
		display: inline;
	}
	.price .prices-wrap > div > p > span {
		font-size: 1.6em;
		font-weight: 500;
	}
	.price > p {
		font-size: 11px;
		text-align: right;
		padding-right: 80px;
		color: rgba(0, 0, 0, 0.7);
	}
	
@media screen and (max-width: 720px) {
	.price .prices {
		grid-template-columns: 100%;
		padding: 0px 0px;
	}
	.price .prices-wrap {
		margin: 0px 0px 20px 0px;
	}
	.price > p {
		padding-right: 0px;
	}
}
	
	.contact {
		background: linear-gradient(93.05deg, rgba(182, 217, 122, 0.77) 4.65%, rgba(158, 199, 237, 0.77) 95.39%) , url('../img/contact_bg.png');
		background-size: cover;
		padding: 5% 15%;
	}
	.contact > div {
		background-color: white;
		text-align: center;
		padding: 60px 10%;
	}
	.contact form {
		text-align: left;
	}
	#inquiry-btn {
		background: #83C2D7;
		color: white;
		text-align: center;
		padding: 10px 80px;
	}
@media screen and (max-width: 720px) {
	.contact {
		padding: 5% 15px;
	}
	.contact > div {
		padding: 60px 10px 30px 10px;
	}
}	
	.footer {
		background: #6DB6CE;
		color: white;
		display: grid;
		grid-template-columns: 50% 50%;
		padding: 40px;
	}
	.footer > div p.title {
		padding: 10px 0px;
	}
	.footer > div p.detail {
		font-size: 0.9em;
		padding-bottom: 5px;
	}
	.footer > div p {
		
	}
	.footer > div a {
		text-decoration: none;
		color: white;
	}
	.footer p.add {
		padding-top: 3px;
		font-size: 0.7em;
		padding-bottom: 0px;
	}
	.footer p.add + p.title {
		padding-top: 3px;
	}
@media screen and (max-width: 720px) {
	.footer {
		grid-template-columns: 100%;
		padding: 20px;
	}
	.footer > div p.detail {
		font-size: 0.8em;
		line-height: 15px;
	}
	.footer > div p.detail span {
		display: none;
	}
}


.table-layout2{max-width: 960px; margin: 30px auto;}
table{width: 100%; border-collapse:collapse;}
th,td{padding: 10px; border: 1px solid #ccc; box-sizing: border-box;}

th{ text-align: left; background: #FFFAFA; vertical-align:middle;}
th.service1{ white-space: nowrap; text-align: center; vertical-align:middle; background: #D7EEFF;}
th.service2{ white-space: nowrap; text-align: center; vertical-align:middle; background: #FFFFCC;}
th.service3{ white-space: nowrap; text-align: center; vertical-align:middle; background: #E6FFE9;}

td{ white-space: nowrap; text-align: center; vertical-align:middle;}

.table-layout2 th{width:30%;}

@media only screen and (max-width: 768px) {
h1,.table-layout2{width: auto; margin: 30px 10px;}
.table-layout2 table{display: block; width: 100%; overflow-x:scroll;}
.table-layout2 tbody{width: auto; white-space: nowrap;}
}

span.red { color: #ff0000; }
span.small-font {font-size: small; }

hr.service {
width:80%;
height: 1px;
border: none;
border-top: 1px #000000 dashed;
}