/* All
------------------------------------------ */
.center-box{
text-align:center;
margin: 2% 0;
}

hr{
margin:1% 0;
}

/* Wrapper
------------------------------------------ */
#wrapper {
	position: relative;
}


/* Header
------------------------------------------ */
#header {
	background: url("../img/header-bg.jpg") no-repeat top right;
	position: relative;
	width: 100%;
	min-height: 80vh;
}

#header .box1{
	position: relative;
    top: 20vh;
	padding:0 56% 0 5%;
}

#header .box2{
	position: relative;
    top: 25vh;
	padding:0 50% 0 5%;
}

#header h2{
	color:#fff;
	font-size:5.5rem;
}

#header h3{
	color:#fff;
	font-size:2.5rem;
	font-weight: 100;
}

@media screen and (max-width:1000px) {
#header {
	background:none;
	position: relative;
	background-color:#61c6df;
}
.sphed{
	text-align: center;
    padding: 5%;
}

#header .box2{
top: 0vh;
    position: relative;
    padding: 0 5% 5%;
}

}

/* prologue
------------------------------------------ */
#news {
	max-width:1320px;
	wdith:100%;
	margin:0 auto;
}

#news .box1{
	padding:5%;
}

/* merit
------------------------------------------ */
#merit {
	background: url("../img/merit-bg.jpg") no-repeat top;
	background-color: #61c6df;
	background-size:100%;
    padding: 5% 44% 5% 1%;
}

#merit .inner{
	max-width:1320px;
	wdith:100%;
	margin:0 auto;
}

#merit .box1{
	padding:36vh 5% 0;
	color:#fff;
}

#merit .box1 h3{
	font-size:3rem;
}

#merit .box1 h2{
	font-size:5rem;
	padding-left:5%;
}

#merit .box1 .big{
	font-size:15rem;
	line-height: 1;
}

#merit .box2{
	padding:13% 0 0 5%;
	color:#fff;
}

#merit .mb{
	margin-bottom:10%;
}

#merit .text{
background:#ffffffdb;
padding:5%;
}


#merit .mvl{
margin-bottom:5%;
}

@media screen and (max-width:1000px) {
	#merit {
		padding:0 5%;
	}
	#merit .box1 h2{
	font-size:3rem;
	padding-left:5%;
}

#merit .box1 .big{
	font-size:10rem;
	line-height: 1;
}

	#merit .box1 {
	    padding: 25vh 0 0;
	}
	#merit .box2 {
    padding:15% 0;
}

}

/* step
------------------------------------------ */
#step {
    padding: 5%;
}

#step .title{
	font-size:3.5rem;
	text-align:center;
	margin-bottom:5%;
}

#step .box1a{
  	display:flex;
  	flex-direction: row;
  	justify-content: space-between;
  	padding: 2% 5%;
  	background: rgb(255,122,149);
	background: linear-gradient(90deg, rgba(255,122,149,1) 0%, rgba(255,182,150,1) 100%);
	color:#fff;
	border-radius: 150px;
	margin-bottom:5%;
	align-items: center;
}

#step .box1b{
  	display:flex;
  	flex-direction: row;
  	justify-content: space-between;
  	padding: 2% 5%;
  	background: rgb(193,191,230);
	background: linear-gradient(90deg, rgba(193,191,230,1) 0%, rgba(234,136,222,1) 100%);
	color:#fff;
	border-radius: 150px;
	margin-bottom:5%;
	align-items: center;
}

#step .box1c{
  	display:flex;
  	flex-direction: row;
  	justify-content: space-between;
  	padding: 2% 5%;
  	background: rgb(116,188,229);
	background: linear-gradient(90deg, rgba(116,188,229,1) 0%, rgba(178,221,173,1) 100%);
	color:#fff;
	border-radius: 150px;
	margin-bottom:5%;
	align-items: center;
}

#step .box1d{
  	display:flex;
  	flex-direction: row;
  	justify-content: space-between;
  	padding: 2% 5%;
  	background: rgb(246,191,159);
	background: linear-gradient(90deg, rgba(246,191,159,1) 0%, rgba(219,138,222,1) 100%);
	color:#fff;
	border-radius: 150px;
	margin-bottom:5%;
	align-items: center;
}

#step .box2{
	vertical-align: middle;
	width: calc(100% - 160px);
}

#step h3{
	font-size:3rem;
}

#step .stepf{
	font-size:2.5rem;
	text-align:center;
}

#step .number{
	width:160px;
	margin-right:5%;
	border-radius: 50%;
    border: solid 3px white;
    padding: 1% 1%;
}

#step .number h2{
	text-align:center;
	font-size:7rem;
}
@media screen and (max-width:1000px) {
#step .box1a{
border-radius: 0px;
}

#step .box1b{
border-radius: 0px;
}

#step .box1c{
border-radius: 0px;
}

#step .box1d{
border-radius: 0px;
}

#step {
    padding: 5% 0 0 0;
}

#step .number{
    width: 130px;
}

}

/* service
------------------------------------------ */
#service {
    padding: 5%;
}

#service .c-box{
    text-align:center;
    border:solid 1px;
    padding:3%;
}

#service h2{
	text-align:center;
	margin-bottom:3%;
	font-size:3rem;
}

#service h3{
	text-align:center;
	margin:3% 0;
	font-size:2.5rem;
}

#service .flex{
  display: flex;
  justify-content: space-around;
}


#service .item{
  flex-basis: 340px;
  text-align:center;
}

#service table{
	border: solid 1px;
    margin: 0 auto;
	width: 80%;
}
#service td{
border: solid 1px;
padding:3%;
}

#service th{
border: solid 1px;
padding:3%;
}

@media screen and (max-width:1000px) {
#service .flex{
justify-content: space-around;
    flex-direction: column;
}
#service .item{
    margin-bottom:3%;
}
}
/* company
------------------------------------------ */
#company {
	padding: 5% 15%;
}

#company table{
	margin:0 auto;
    border-collapse: separate;
    border-spacing: 30px 30px;
}

#company table th{
	text-align:left;
	font-size:2rem;
}

#company table td{
	text-align:left;
	font-size:2.5rem;
}


#company h2{
	text-align:center;
	font-size:2.5rem;
}

#company .mb{
	margin-bottom:5%;
}

@media screen and (max-width:1000px) {
	#company {
    padding: 0;
}

}

/* action
------------------------------------------ */
#action {
	padding: 5% 15%;
}

#action h2{
	text-align:center;
	font-size:2.5rem;
}

#action p{
	text-align:center;
}

#action .mb{
	margin-bottom:5%;
}
@media screen and (max-width:1000px) {
#action {
	padding: 0 0 5%;
}

}

/*footer
------------------------------------------ */
#footer{
}

#footer .inner{
width: 100%;
margin: 0 auto;
text-align: right;
padding:1%;
background:#303030;
color:#fff;
text-align: center;
}

#footer a{
color:#fff;}



.pc {
}
.sp {
	display: none;
}
 
@media screen and (max-width: 1000px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}