.section-top {
  background: url(../img/blue-beach.jpg);
  background-size: cover;
  height: 120vh;
}
.section-top > div{
  text-align: center;
  padding-top: 15vh;
  color: #fff;
  height: 100%;
  background-position: bottom;
}
.sub-title {
  margin-bottom: 0vh;
}
.sub-title h2{
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 1.6rem;
  letter-spacing: 10px;
}

.sub-title h2:before, .sub-title h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #fff;
}

.sub-title h2:before {
  left:0;
}
.sub-title h2:after {
  right: 0;
}
.top-title {
  position: relative;
  display: inline-block;
  margin-bottom: 6vh;
}
.top-title h1 {
  line-height: 2;
  font-size: 1.8rem;
  letter-spacing: 6px;
}
.top-title img {
  position: absolute;
  width: 100px;
}
.top-title img[src="img/flower1.png"] {
  left: -100px;
  top: 55%;
}
.top-title img[src="img/flower2.png"] {
  right: -100px;
  top: 55%;
}
.section-top .button-wrapper {

}
.section-top .layer-button {
  color: #fff;
  font-size: 1.2rem;
}
.section-top .layer-button i {
  margin-right: 10px;
  font-size: 1.3rem;
  transition: 0.3s;
}
.three-image {
  position: relative;
}
.three-image > div{
  position: absolute;
  width: 250px;
}
.three-image > div img{
  width: 100%;
}
.three-image > div:nth-of-type(1){
  left: 10%;
  opacity: 0.8;
}
.three-image > div:nth-of-type(2){
  left: 50%;
  transform: translateX(-50%);
  top: 110px;
  opacity: 0.8;
}
.three-image > div:nth-of-type(3){
  right: 10%;
  width: 270px;
}
.three-image > div:nth-of-type(3) img{
  border-radius: 50%;
  box-shadow: 0 0 4px  10px rgba(180, 204, 227,0.5);
  position: relative;
}
.three-image > div:nth-of-type(3) .mr-kobayashi{
  content: "小林 一";
  font-size: 1.2rem;
  position: absolute;
  display: inline-block;
  line-height: 1.5;
  text-align: left;
  padding:0 25px;
  border-radius: 4px;
  background: #363636;
  letter-spacing: 4px;
  bottom: 30px;
  right: -50px;
}
.section-minilp {
  padding-top: 15vh;
  padding-bottom: 15vh;
  position: relative;
  height: auto;
}
.section-minilp > img{
  position: absolute;
}
.section-minilp > img[src="img/leaf1.png"]{
  left: 0;
  top: 30px;
  width: 50vw;
}
.section-minilp > img[src="img/leaf2.png"]{
  right: 30px;
  top: 150px;
  width: 40vw;
}
.section-minilp > img[src="img/leaf2.png"]{
}

.bottom-go {
    display: block;
    text-align: center;
    position: absolute!important;
    bottom: -3.2rem;
    left: 50%;
    -webkit-transform: translateX(-50%)!important;
    -ms-transform: translateX(-50%)!important;
    transform: translateX(-50%);
    z-index: 3;
}
.bottom-go i{
  font-size: 6rem;
  color: #fff;
}


/* about */
.section-about {
  background: #DFEFED;
  background-size: cover;
  padding-top: 15vh;
  padding-bottom: 15vh;
  position: relative;
}

.section-about > img{
  position: absolute;
  width: 200px;
}
.section-about > img[src="img/flower4.png"]{
  width: 180px;
  top: 60px;
  right: 150px;
}
.section-about > img[src="img/flower3.png"]{
  width: 120px;
  top: 180px;
  right: 10px;
}
.section-about > img[src="img/shellfish1.png"]{
  width: 150px;
  bottom: 0px;
  left: 0px;
}
.section-about > img[src="img/shellfish2.png"]{
  width: 150px;
  bottom: 150px;
  right: -50px;
}
.section-about > img[src="img/paint3.png"]{
  width: 130px;
  bottom: 10px;
  right: 200px;
}
.section-about > img[src="img/paint4.png"]{
  width: 200px;
  top: 130px;
  left: 50px;
}
.section-about > img[src="img/paint5.png"]{
  width: 180px;
  top: 100px;
  right: 150px;
}
.section-about > img[src="img/paint6.png"]{
  width: 230px;
  bottom: 110px;
  right: 100px;
}
.section-about > *{
  width: 1100px;
  max-width: 90%;
  margin: auto;
}
.about-box .two-box {
  margin-bottom: 50px;
}
.section-about .about-box::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #DFEFED;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.section-about .about-box {
  background: #FFF4E0;
  position: relative;
  padding-bottom:50px;
box-shadow: 6px 6px #bbb;
border-radius: 4px;
}
.section-about .sub-title {
  text-align: center;
}
.section-about .sub-title img {
  height: 40px;
  margin-right: 30px;
}
.section-about .sub-title .gold-font {
  font-weight: bold;
}
.section-about .left {
  margin-right: 2%;
  position: relative;
}
.section-about .left img{
  width: 90%;
  margin-top: 30% ;
}
.section-about .right  .flex{
justify-content: center;
    align-items: center;
}
.section-about .right  .flex > span{
    width: 140px;
    font-family: 'Candal' cursive;

    font-family: 'Luckiest Guy', cursive;
    line-height: 1;
    font-size: 10rem;
    color: #fff;
    position: relative;
}
.section-about .right  .flex > div{
    width: calc(100% - 140px);
    height: 10rem;
}
.section-about .big-ul {
  margin-top: 60px;
}
.three-d-title {
  position: absolute;
}
.ribbon {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 0;
  margin: 0 0 0 -20px;
  color: white;
  background: #E81F29;
  top: 60px;
}

.ribbon h3{
  margin: 0;
  padding: 0 30px 0 15px;
  padding-left: 30px;
  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;
  font-size: 22px;
  letter-spacing: 6px;
 
  line-height: 46px;
}

.ribbon:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #FFF4E0 transparent transparent;
  border-style: solid;
}

.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #A52000;
}

/* business section */
.section-business {
  padding-top: 15vh;
  padding-bottom: 5vh;
}
.section-business .big-ul{
  width: 1000px;
  max-width: 90%;
  margin: auto;
}
.section-business .two-box{
  align-items: center;
  justify-content: center;
}
.section-business .two-box .left{
  width: 50%;
}
.section-business .big-li:nth-of-type(2n+1) .right{
  width: 80%;
  position: relative;
  right: 60px;
}
.section-business .big-li:nth-of-type(2n) .left {
  z-index: 9;
  width: 80%;
}
.section-business .big-li:nth-of-type(2n) .right {
  position: relative;

  right: 60px;
}
.section-business .two-box  h3{
  margin: 16px 0;
  letter-spacing: 10px;
}
.section-business .big-li {
  margin-bottom: 80px;
}
.big-li1 .business-img{
  background: url(../img/business1.jpg);
  background-size: cover;
  width: 100%;
  height: 300px;
}
.big-li2 .business-img{
  background: url(../img/business2.jpg);
  background-size: cover;
  width: 100%;
  height: 300px;
}
.section-business .sub-title {
  text-align: center;
  margin-bottom: 100px;
}
.section-business .sub-title img {
    height: 40px;
    margin-right: 30px;
}

/* contact section */
.section-contact {
  position: relative;
  background-image: url(../img/wood.jpg);
  height: 100vh;
  background-size: cover;
}
#svg-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.contact-me {
  width: 95%;
  z-index: 9;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
.contact-me img{
  width: 120px;
  margin: auto;
}
.contact-me a{
  color: #fff;
  font-size: 1.6rem;
}

.section-contact .layer-button i {
  margin-right: 10px;
  transition: 0.3s;
}
.contact-me .h1 {
  font-size: 2.2rem;
}
.contact-me .top-title {
  width: 100%;

}
.contact-me .layer-button {
  letter-spacing: 8px;
}