/* 基本CSS */

#MV{
	background: url("../img/MV.png");
	background-size:100%;
	background-position: top;
	background-repeat: no-repeat;
	padding: 13% 0 0;
	position: relative
}
#MV .logo{
	position: absolute;
	left:5%;
	top:4%;
	width: 25%;
	z-index: 100
}
#MV .box01 .column2:nth-child(1){
	width: 55%
}
#MV .box01 .column2:nth-child(2){
	width: 40%
}

#MV .box02{
	padding: 3% 0 0;
	background: #fff;
	margin-top: 3%
}
#MV .box02 .box{
	max-width: 1200px; width: 77%; margin: 0px auto
}

@media screen and (max-width:782px) {
#MV{
	background: url("../img/MV_sp.png");
	background-size:100%;
	background-position: top;
	background-repeat: no-repeat;
	padding: 25% 0 0%;
	position: relative
}
#MV .logo{
	position: absolute;
	left:5%;
	top:4%;
	width: 45%;
	z-index: 999
}
#MV .box01 .column2:nth-child(1){
	width: 75%
}
#MV .box01 .column2:nth-child(2){
	width:100%
}
#MV .box02{
	margin-top: 0
}
#MV .box02 .box{
	max-width: 1200px; width: 90%; margin: 0px auto
}
}



#top01{
	background: url("../img/bg01.png");
	background-size:cover;
	background-position: center;
	position: relative;
}
#top01 h4{
	line-height: 200% !important;
	margin-top: 10%
}
#top01 h4 span{
	background: #ea7160;
	font-weight: bold !important; 
	padding: 5px
}
#top01 .column2:nth-child(1){
	width: 40% !important
}
#top01 .column2:nth-child(2){
	width:55% !important
}
@media screen and (max-width:782px) {
#top01 h4{
	margin-top:0
}
#top01 .column2:nth-child(1){
	width: 100% !important
}
#top01 .column2:nth-child(2){
	width:100% !important
}
}



#top02 h4 {
	margin-bottom: 5%;
	margin-top: 20%
}
#top02 h4 span{
	background: #02b4c1;
	border-radius: 50px;
	padding: 8px 30px
}
#top02 .column2:nth-child(1){
	width: 55% !important
}
#top02 .column2:nth-child(2){
	width:40% !important
}
#top02 .ttl {
	max-width: 700px;
	margin:10% auto 5%
}

#top02 .column3{
	background: #e7f6fa;
	border-radius: 20px;
	padding: 5% 0;
	text-align: center
}
#top02 .column3 img{
	width: 40%
}


@media screen and (max-width:782px) {

#top02 h4 {
	margin-bottom: 5%;
	margin-top: 0;
}
#top02 .column2:nth-child(1){
	width: 100% !important
}
#top02 .column2:nth-child(2){
	width: 60% !important;
	margin: 0 auto
}
#top02 .column3{
	background: #e7f6fa;
	border-radius: 20px;
	padding: 8% 0 5%;
	text-align: center
}
}


#top03 {
	background: url("../img/bg02.png");
	background-size:100%;
	background-position: center;
	position: relative;
	background-repeat: repeat
}
#top03 h2{
	margin-bottom: 5%
}
#top03 .box01 .txt{
	background: #fff;
	border-radius: 15px;
	border: 4px solid #02b4c1;
	position: absolute;
	padding: 3% 0;
	width: 42%;
	margin-top: 5%
}
#top03 .box01 .txt .point{
	position: absolute;
	width: 22%;
	left: -10%;
	top:-50%
}
#top03 .box02 .txt{
	background: #fff;
	border-radius: 15px;
	border: 4px solid #02b4c1;
	position: absolute;
	padding: 3% 0;
	width: 42%;
	margin-top: 5%;
	right: 12%
}
#top03 .box02 .txt .point{
	position: absolute;
	width: 22%;
	right: -10%;
	top:-50%
}
#top03 .txt h3{
	width: 90%;
	margin:0 auto
}
#top03 .txt p{
	width: 90%;
	margin:0 auto
}
#top03 .txt h3 span{
background: linear-gradient(transparent 50%, #f3cabe 50%);
}



@media screen and (max-width:782px) {
#top03 .box01 .column2:nth-child(1){
	order: 2
}
#top03 .box01 .txt{
	position: relative;
	padding: 3% 0;
	width:98%;
	margin-top:0
}
#top03 .box01 .txt .point{
	position: absolute;
	width: 70px;
	left: -5%;
	top:-55%
}
#top03 .box02 .txt{
	position: relative;
	padding: 3% 0;
	width:98%;
	margin-top: 0;

	right: 0
}
#top03 .box02 .txt .point{
	position: absolute;
	width: 70px;
	left: -5%;
	top:-45%
}
}



#top04 h2{
	margin-bottom: 5%
}
#top04 .column3{
	position: relative;
	z-index: 2
}
#top04 .column3 .img{
	text-align: center;
}
#top04 .column3:nth-child(1) .img{
	width: 85%
}
#top04 .box{
	position: relative
}
#top04 .box .line{
	position: absolute;
	top:6%;
	width: 90%;
	left:0;
	right:0;
	margin:0 auto;
	z-index: 1
}


@media screen and (max-width:782px) {
#top04 .box .line{
	display: none
}
#top04 .step{
		width: 50%;
	margin:  0 auto
}
}


#top05 {
	background: #02b4c1
}
#top05 h2{
	margin-bottom: 3%
}
#top05 h5{
	margin-bottom: 5%
}
#top05 h4{
	width: 90%;
	margin: 0 auto;
	font-weight: bold !important;
	line-height: 150% !important
}
#top05 span{
	color: #02b4c1
}
#top05 p{
	margin-bottom: 5%
}
#top05 .box .column2{
	margin-bottom: 1% !important
}
#top05 .box01 .column2:nth-child(1){
	width: 20%
}
#top05 .box01 .column2:nth-child(2){
	width: 75%;
	background: url("../img/bg03.png");
	background-size:100% 70%;
	background-repeat: no-repeat;
	background-position: right;
	padding: 7% 0 10%
}
#top05 .box02 .column2:nth-child(1){
	width: 75%;
	background: url("../img/bg03.png");
	background-size:100% 70%;
	background-repeat: no-repeat;
	background-position: right;
	padding: 7% 0 10%
}
#top05 .box02 .column2:nth-child(2){
	width: 20%
}

@media screen and (max-width:782px) {
#top05 h5{
	margin-bottom: 10%
}
#top05 .box01 .column2:nth-child(1){
	margin-right: 5%
}
#top05 .box01 .column2:nth-child(2){
	width: 75%;
	background: url("../img/bg03_sp.png");
	background-size:100% 80%;
	background-repeat: no-repeat;
	background-position: top;
	padding: 8% 0 28%
}
#top05 .box02 .column2:nth-child(1){
	width: 75%;
	background: url("../img/bg04_sp.png");
	background-size:100% 80%;
	background-repeat: no-repeat;
	background-position: top;
	padding: 8% 0 28%
}
#top05 .box02 .column2:nth-child(1){
	margin-right: 5%
}
}



#top06 {
	background: #e7f6fa
}
#top06 h2{
	margin-bottom: 3%
}
#top06 .column2 img{
	width: 130% !important
}

#top06 .faq{
	background: #fff;
	border-radius: 10px;
	padding: 3% 0;
	margin-bottom: 2%
}
#top06 .faq .box{
	width: 90%;
	margin:0 auto
}
#top06 .faq_q {
	margin-bottom: 3% !important;
}
#top06 .faq_q h4{
	font-weight: bold !important
}
#top06 .box .column2{
	margin-bottom: 0
}
#top06 .faq_q .column2:nth-child(1){
	width: 3%;
}
#top06 .faq_a .column2:nth-child(1){
	width: 3%;
}
#top06 .faq_q .column2:nth-child(2){
	width: 94%;
}
#top06 .faq_a .column2:nth-child(2){
	width: 94%;
}

@media screen and (max-width:782px) {
#top06 .faq{
	padding: 5% 0;
	margin-bottom: 2%
}
#top06 .faq_q .column2:nth-child(1){
	width: 6%;
}
#top06 .faq_a .column2:nth-child(1){
	width: 6%;
}
#top06 .faq_q .column2:nth-child(2){
	width: 90%;
	padding-left: 4%
}
#top06 .faq_a .column2:nth-child(2){
	width: 90%;
	padding-left: 4%
}

}


.soudan {
	background:#fff
}
.soudan .ttl {
	max-width: 500px;
	margin:0 auto;
	text-align: center
}

.soudan h3 {
	margin-bottom: 3%
}
.soudan p {
	font-size: 14px !important
}
.soudan .contact {
	background: #ea7160;
	border-radius: 10px;
	padding: 5% 0 2%;
	position: relative;
	overflow: hidden
}
.soudan .contact .bg{
	position: absolute;
	right:0;
	bottom:0;
	width: 18%
}
.soudan .contact .box{
	width: 70%;
	margin:0 auto;
	position: relative;
	z-index: 1
}
.soudan .contact h4{
	margin-bottom: 3%
}

@media screen and (max-width:782px) {
.soudan .contact {
	background: #ea7160;
	border-radius: 10px;
	padding: 10% 0 5%
}
.soudan .contact .bg{
	position: absolute;
	right:0;
	bottom:0;
	width: 28%
}
}