@charset "utf-8";

.first-view {
  height: calc(100vh - 120px);
  background-image: url(../images/index/bg-main.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;;
  align-items: center;
  border-top: 10px solid #54a4a6;
}

.first-view img {
  width: 70%;
  padding-left: 40px;
  padding-bottom: 50px;
}


.lead {
  max-width: 1200px;
  margin: 30px auto; 
  display: block;
  text-align: left;
}

.lead p {
  line-height: 2;
  padding-left: 20px;
  padding-right: 20px;
}

.info {
  max-width: 1200px;
  margin: 30px auto; 
  display: block;
}

.info a {
  color: #000066;
	text-decoration: underline;
}



.info h3 {
  background-color: #54a4a6;
  color: #ffffff;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 5px;
}

.info ol {
  list-style-type: square;
  line-height: 1.5;
  padding-top: 20px;
  padding-left: 45px;
  padding-right: 20px;
  font-weight: bold;
}

.info li {
  padding-bottom: 25px;
}

.info-new {
  background-color: #fffafa;
}



.info-text{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.gaiyou {
  max-width: 1200px;
  margin: 30px auto; 
}

.gaiyou h3{
  background-color: #54a4a6;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.gaiyou p {
  line-height: 2;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.gaiyou-text{
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.gaiyou01a {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 50px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-top: 2px solid #54a4a6;
  border-bottom: 2px solid #54a4a6;

}

.gaiyou01-text {
  margin-bottom: 0px;
}


.gaiyou01a-01 {
  flex-basis: 30%;
}

.gaiyou01a-06 {
  flex-basis: 70%;
}

.gaiyou01a img {
  width: 400px;
  padding-left: 20px;
  padding-right: 20px;

  padding-bottom: 20px;
}

.gaiyou01a-01 img {
  transition-duration: 0.2s;
}

.gaiyou01a-01 img:hover {
  transform: scale(1.1);
}




.gaiyou01a p {
padding-right: 20px;
padding-left: 40px;
}

.gaiyou01a h4 {
  padding-left: 30px;
  }
  



.gaiyou01b {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.gaiyou01b-01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 30%;
}

.gaiyou01b-03 {
  flex-basis: 70%;
}

.gaiyou01b img {
  width: 400px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.gaiyou01b h4 {
  padding-left: 30px;
}

.gaiyou01b p {
padding-right: 20px;
padding-left: 40px;
}

.gaiyou01b-01 img {
  transition-duration: 0.2s;
}

.gaiyou01b-01 img:hover {
  transform: scale(1.1);
}





.gaiyou02a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

}

.gaiyou02a-01 img {
  width: 240px;
  padding-top: 20px;
  padding-left: 50px;
  padding-bottom: 30px;
}
.gaiyou02a-02 p {
  padding-left: 40px;

}




.gaiyou02a-02 ol {
  line-height: 2;
  padding-top: 10px;
  padding-left: 50px;
  padding-right: 30px;
  padding-bottom: 10px;
  list-style-type: square;
  text-align: left; 
  background-color: #F5F5DC;
  margin-left: 30px;
}

.gaiyou02a-01 {
  flex-basis: 30%;
}

.gaiyou02a-02 {
  flex-basis: 70%;
}

.gaiyou01a-03 {
  background-color: #f5f5f5;
  padding-top: 20px;
  margin-left: 15px;
  margin-bottom: 30px;
}

.gaiyou01a-03 h4 {
text-decoration: underline #545454;
padding-top: 20px;
padding-left: 30px;
}

.gaiyou01a-03 p {
padding-top: 10px;
padding-left: 30px;
}

.gaiyou01a-04 {
  text-align: center;
}


.gaiyou01a-03 img {
  width: 200px;

}




@media (max-width: 768px) {  
  
  .first-view {
    height: calc(100vh - 400px);
    background-image: url(../images/index/bg-main-sp.png);
    margin-top: 20px;
    padding-top: 0px;

  }

  .first-view img {
    width: 90%;
    padding-left: 0px;
    padding-bottom: 40px;
  }

  .lead {
    margin-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .info ol {
   padding-left: 30px;
    padding-right: 0px;
  }
  

  .lead p {
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
  }

  .info-text {
    padding-left: 0px;
    padding-right: 0px;
  }

  .info-text ol {
    text-align: left;
  }

  .gaiyou01-text {
    padding-left: 0px;
    padding-right: 0px;
  }

  .gaiyou01-text p {
    text-align: left;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .gaiyou01a {
    display: block;
    text-align: center;
    padding-top: 20px;
  }

.gaiyou01a img {
  width: 70%;
  padding-left: 0px;
  padding-bottom: 30px;
}

.gaiyou02a {
  display: block;
  text-align: center;
}

.gaiyou01a h4 {
  text-align: left;
  padding-top: 10px;
  padding-left: 0px;
  padding-bottom: 10px;
}

.gaiyou02a-01 img {
  width: 50%;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
}

.gaiyou02a-02 ol {
  line-height: 2;
  padding-top: 10px;
  padding-left: 40px;
  padding-right: 0px;
  padding-bottom: 10px;
  margin-left: 0px;
  margin-bottom: 30px;
}
.gaiyou02a-02 p {
  padding-bottom: 5px;
}

.gaiyou01b {
  display: block;
  text-align: center;
padding-top: 0px;
}

.gaiyou01b h4 {
  text-align: left;
  padding-top: 10px;
  padding-left: 0px;
  padding-bottom: 10px;
}


.gaiyou01b-01 img {
  width: 70%;
  padding-top: 0px;
  padding-left: 0px;
}

.link-button-area {
  margin-top: 30px;
 }

  
}