@charset "utf-8";

#main .image {
	background: url(img-ts/main.png) no-repeat;
   background-size: cover;
   background-position: center;
}
#main h2 {
	padding: 2em 0 0 2em;
   font-size: 5vw;
   color: #fff;
}
h2 span {
    display: block;
    color: #338b69;
    text-shadow: 0px 0px 3px #FFE;
    -webkit-text-stroke: 1px #fff;
}

#main h3 {
	padding: 0.1em 0 2em 2em;
    font-size: 5vw;
    font-weight: normal;
    padding-top: 0.1em;
}
#main h3 span {
    font-size: 0.35em;
    display: block;
    line-height: 1em;
    padding: 0.3em;
    background: #d3df31;
    width: 10em;
    text-align: center;
    border-radius: 0.2em;
}
#point {
    padding: 5em;
    text-align: center;
}
#point p.title {
    padding-bottom: 4em;
}
#point .column3 {
    columns: 3;
    column-gap: 4%;
    padding: 1em 5em;
}
#point section {
    border: 4px solid #6AB799;
    border-radius: 1em;
    position: relative;
    padding: 1em 0em;
}
#point section h4 {
    font-size: 1em;
    padding-top: 9em;
    line-height: 1.5em;
}
#point section h4::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 15em;
    display: block;
    top: 1em;
    left: 20%;
}
#point section:nth-of-type(1) h4::before {
    background: url(img-ts/icon-pt1.png) no-repeat;
    background-size: contain;
}
#point section:nth-of-type(2) h4::before {
    background: url(img-ts/icon-pt2.png) no-repeat;
    background-size: contain;
}
#point section:nth-of-type(3) h4::before {
    background: url(img-ts/icon-pt3.png) no-repeat;
    background-size: contain;
}

#point section p {
    font-size: 0.9em;
    line-height: 1.5em;
    padding-top: 1em;
}
#point section p span {
	font-weight:bold;
}

#dwt {
    background: #6ab799;
    position: relative;
    overflow: hidden;
}
#dwt h2 {
    color: #fff;
    padding: 2em 2em 1em;
    text-shadow: 1px 2px 3px #808080;
	 text-align: center;
}
#dwt ul {
    display: grid;
    text-align: center;
    grid-template-columns: 20% 20% 20% 20% 20%;
    margin: 1em 5em;
}
#dwt li {
    background: #ffffff;
    line-height: 1.3em;
    padding: 1em;
    margin: 0.2em;
    height: 6em;
    display: grid;
    place-content: center;
    border-radius: 0.5em;
    box-shadow: 1px 2px 3px #808080;
    font-size: 0.8em;
}
#dwt p {
    text-align: center;
    color: #fff;
    padding: 3em 0 11em;
	 font-size:1.2em;
}
#dwt::before {
    content: "";
    position: absolute;
    background: #fff;
    width: 60%;
    height: 45%;
    transform: rotate(15deg);
    bottom: -23%;
    right: 46%;
}
#dwt::after {
    content: "";
    position: absolute;
    background: #fff;
    width: 60%;
    height: 45%;
    transform: rotate(-15deg);
    bottom: -23%;
    left: 46%;
}

#tp {
	padding-bottom: 3em;
}
#tp h2{
	 font-size: 1.5em;
    text-align: center;
    color: #016A70;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
    padding: 1.5em 1em;
    margin: 3em;
    font-weight: normal;
}
#tp .wrapper {
    display: grid;
    text-align: center;
    grid-template-columns: 33% 34% 33% ;
    margin: 1em 4em;
}
#tp section h4::before {
    content: "";
    position: relative;
    width: 100%;
    height: 8em;
    display: block;
    left: 1.3em;
}
#tp section:nth-of-type(1) h4::before {
    background: url(img-ts/icon-tp1.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(2) h4::before {
    background: url(img-ts/icon-tp2.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(3) h4::before {
    background: url(img-ts/icon-tp3.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(4) h4::before {
    background: url(img-ts/icon-tp4.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(5) h4::before {
    background: url(img-ts/icon-tp5.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(6) h4::before {
    background: url(img-ts/icon-tp6.png) no-repeat;
    background-size: contain;
}

#tp section {
	position: relative;
	margin: 0 1em;
}
#tp section div {
	 position: absolute;
    font-size: 2em;
    z-index: 10;
    color: #016A70;
}
#tp section h4 {
	  margin-top: 1em;
    text-align: left;
    font-weight: normal;
    font-size: 1.2em;
    color: #6AB799;
}
#tp section p {
	 font-size: 0.9em;
    text-align: left;
    line-height: 1.4em;
    padding: 1em 0 4em;
}
#inquiries {
	background:#eee;
}
#inquiries .centered {
	 position: relative;
    padding: 6em 1em;
}

#inquiries .centered::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 15em;
    display: block;
    background: url(img-ts/img-iq.png) no-repeat;
    background-size: contain;
    top: 10em;
    left: 9em;
}
#inquiries h3 {
	  font-size: 1.6em;
    font-weight: normal;
    color: #016A70;
    text-align: center;
}
#inquiries h4 {
	font-size: 1.2em;
    margin-left: 52%;
    margin-top: 2em;
    font-weight: normal;
    color: #6AB799;
}
#inquiries p {
	 margin-left: 52%;
    line-height: 1.3em;
    width: 23em;
    padding-top: 1em;
}

@media screen and (max-width:580px){
	#main .image {
		background-position: 60%;
	}
	#main h2 {
        font-size: 9vw;
        padding: 1.7em 1em 0.3em 0.5em;
    }
	#main h3 {
        font-size: 11vw;
        padding: 0 1em 1.5em 0.4em;
    }
	#point p.title {
		font-size: 1.2em;
		line-height: 1.4em;
	}
	#point .column3 {
		columns: auto;
		padding: 0;
	}
	#point section {
		margin-bottom: 2em;
	}
	#point section p {
		font-size: 1.2em;
	}
	#point section h4 {
		font-size: 1.5em;
		padding-top: 8em;
		line-height: 1.2em;
	}
	#dwt h2 {
		text-align: center;
	}
	#dwt ul {
		grid-template-columns: 33% 33% 33%;
		margin: 1em 2em;
	}
	#dwt::before {
		bottom: -90%;
	}
	#dwt::after {
		bottom: -90%;
	}
	#tp h2 {
		margin: 2em 1em;
	}
	#tp .wrapper {
		display: grid;
		grid-template-columns: 50% 50%;
		margin: 1em;
	}
	#inquiries .centered::before {
		left: 3em;
		height: 19em;
		width: 26em;
	}
	#inquiries h4 {
		margin-top: 20em;
		margin-left: 3em;
	}
	#inquiries p {
		margin-left: 3em;
	}
	
}