@charset "utf-8";

#main .image {
	background: url(img-as/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: #1581c5;
    text-shadow: 0px 0px 3px #FFE;
    -webkit-text-stroke: 1px #fff;
}

#main h3 {
	padding: 0.1em 0 1.5em 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: #dfd031;
    width: 10em;
    text-align: center;
    border-radius: 0.2em;
}
#style {
	
}
#style .column5{
	 display: grid;
    text-align: center;
    grid-template-columns: 20% 20% 20% 20% 20%;
    margin: 1em 5em;
}

#style .column5 section{
	position: relative;
    margin-top: 6em;
}
#style .column5 section::after {
    content: "";
    position: relative;
    width: 100%;
    height: 16em;
    display: block;
    margin-top: 2em;
}
#style section:nth-of-type(1)::after    {
    background: url(img-as/img-st1.png) no-repeat;
    background-size: contain;
}
#style section:nth-of-type(2)::after {
    background: url(img-as/img-st2.png) no-repeat;
    background-size: contain;
}
#style section:nth-of-type(3)::after {
    background: url(img-as/img-st3.png) no-repeat;
    background-size: contain;
}
#style section:nth-of-type(4)::after {
    background: url(img-as/img-st4.png) no-repeat;
    background-size: contain;
}
#style section:nth-of-type(5)::after {
    background: url(img-as/img-st5.png) no-repeat;
    background-size: contain;
}
#style .column5 section h4{
	transform: rotate(90deg);
    text-align: left;
    font-weight: normal;
    font-size: 1.2em;
    border-bottom: 1px solid #9cb4d3;
    width: 8em;
    padding-top: 2em;
}
#merits {
	padding-bottom: 3em;
}
#merits h2{
	 font-size: 1.5em;
    text-align: center;
    color: #0C356A;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
    padding: 1.5em 1em;
    margin: 3em 3em 1em;
    font-weight: normal;
}
#merits section {
    padding: 2em 5em;
	 position:relative;
}
#merits section::before {
    content: "";
    position: absolute;
    width: 24em;
    height: 18em;
    display: block;
}
#merits section:nth-of-type(1)::before {
    background: url(img-as/img-mt1.png) no-repeat;
    background-size: contain;
}
#merits section:nth-of-type(2)::before {
    background: url(img-as/img-mt2.png) no-repeat;
    background-size: contain;
	 right: 5em;
}
#merits section:nth-of-type(3)::before {
    background: url(img-as/img-mt3.png) no-repeat;
    background-size: contain;
}
#merits section h4{
	 margin: 0 0 0 53%;
    font-size: 1.3em;
    color: #1d82c4;
    font-weight: normal;
    line-height: 2em;
}
#merits section:nth-of-type(2) h4{
	 margin: 0 0 0 0;
}
#merits section p{
	 margin: 1em 1em 0 53%;
    line-height: 1.2em;
}
#merits section:nth-of-type(2) p{
	 margin: 1em 1em 0 0;
    width: 46%;
}

#tp {
	padding-bottom: 3em;
}
#tp h2{
	 font-size: 1.5em;
    text-align: center;
    color: #0C356A;
    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-as/img-tp1.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(2) h4::before {
    background: url(img-as/img-tp2.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(3) h4::before {
    background: url(img-as/img-tp3.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(4) h4::before {
    background: url(img-as/img-tp4.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(5) h4::before {
    background: url(img-as/img-tp5.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(6) h4::before {
    background: url(img-as/img-tp6.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(7) h4::before {
    background: url(img-as/img-tp7.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(8) h4::before {
    background: url(img-as/img-tp8.png) no-repeat;
    background-size: contain;
}
#tp section:nth-of-type(9) h4::before {
    background: url(img-as/img-tp9.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: #0C356A;
}
#tp section h4 {
	  margin-top: 1em;
    text-align: left;
    font-weight: normal;
    font-size: 1.2em;
    color: #1d82c4;
}
#tp section p {
	 font-size: 0.9em;
    text-align: left;
    line-height: 1.4em;
    padding: 1em 0 4em;
}

#cc {
	background:#1D82C4;
	padding-bottom: 22em;
	position: relative;
    overflow: hidden;
}
#cc::before {
    content: "";
    position: absolute;
    background: #eee;
    width: 100%;
    height: 100%;
    transform: rotate(15deg);
    bottom: -63%;
    right: 50%;
}
#cc::after {
    content: "";
    position: absolute;
    background: #eee;
    width: 100%;
    height: 100%;
    transform: rotate(-15deg);
    bottom: -63%;
    left: 50%;
}

#cc h3 {
    color: #fff;
    font-weight: normal;
    text-align: center;
    padding: 3em 0 5em;
    font-size: 1.5em;
}
#cc .wrapper {
	 display: grid;
    grid-template-columns: 48% 48%;
    margin: 0 6em;
    column-gap: 4%;
}
#cc section{
	 background: #fff;
    position: relative;
    border-radius: 1em;
}
#cc section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 7em;
    display: block;
    top: -3.5em;
}
#cc section:nth-of-type(1)::before {
    background: url(img-as/img-cc1.png) no-repeat;
    background-size: contain;
}
#cc section:nth-of-type(2)::before {
    background: url(img-as/img-cc2.png) no-repeat;
    background-size: contain;
}
#cc section div{
     position: absolute;
    top: -1.7em;
    left: 5em;
    font-size: 1.7em;
}
#cc section div span{
	 background: url(img-as/star.png) no-repeat;
    background-size: contain;
    width: 0.9em;
    height: 0.9em;
    display: inline-block;
    margin: 0 0.5em 0 0;
}
#cc section h5{
	  padding: 1em 1em 1em 7em;
    font-size: 1.1em;
    font-weight: normal;
    line-height: 1.2em;
}
#cc section p{
	 line-height: 1.4em;
    padding: 0 1.5em 2em;
}

#inquiries {
	background:#eee;
}
#inquiries .centered {
	 position: relative;
    padding: 1em 1em 6em;
}

#inquiries .centered::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 15em;
    display: block;
    background: url(img-as/img-iq.png) no-repeat;
    background-size: contain;
    top: 6em;
    left: 9em;
}
#inquiries h3 {
	  font-size: 1.6em;
    font-weight: normal;
    color: #0C356A;
    text-align: center;
}
#inquiries h4 {
	font-size: 1.2em;
    margin-left: 52%;
    margin-top: 2em;
    font-weight: normal;
    color: #1d82c4;
}
#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;
    }
	#style .column5{
		  margin: 0em;
	}
	#merits h2 {
		margin: 1em;
	}
	#merits section {
		padding: 2em 0;
		margin: 0 2em;
	}
	#merits section h4 {
		line-height: 1.2em;
		margin: 2em 0 3em 8em;
	}
	#merits section::before {
		width: 9em;
	}
	#merits section p {
		margin: 2em 0 1em;
	}
	#merits section:nth-of-type(2) {
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
	}
	#merits section:nth-of-type(2)::before {
		right: 0;
	}
	#merits section:nth-of-type(2) h4 {
		margin: 1.5em 7em 2.5em 0;
	}
	#merits section:nth-of-type(2) p {
		margin: 1em 0;
		width: 100%;
	}
	#tp h2 {
		margin: 2em 1em;
	}
	#tp .wrapper {
		display: grid;
		grid-template-columns: 50% 50%;
		margin: 1em;
	}
	#cc {
		padding-bottom: 30em;
	}
	#cc .wrapper {
		display: block;
		margin: 0 3em;
	}
	#cc section {
		margin-bottom: 6em;
	}
	#inquiries .centered::before {
		left: 3em;
		height: 19em;
		width: 26em;
	}
	#inquiries h4 {
		margin-top: 20em;
		margin-left: 3em;
	}
	#inquiries p {
		margin-left: 3em;
	}
	
}