#header {
  height: 6vw;
	position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1234;
}


#bg-rellax {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -5vw;
  left: 0;
  height: 150%
}

.ttl-index {
	background: #fff;
	display: inline-block;
    position: relative;
    z-index: 123;
}
.ttl-index img {
    width: 60%;
}
.index-header::after {
    content: "";
    border-bottom: solid 1px #2e9dd9;
    width: 100%;
    position: absolute;
    top: 5vw;
    left: 0;
    z-index: 12;
}

#nary {
	position: absolute;
	color: #9f9fa0;
	font-size: 150%;
	top:2em;
	left: -6em;
	transform: rotate(90deg);
}


#scrool {
	position: absolute;
	font-size: 120%;
	top: 1em;
	right: 0;
	transform: rotate(-90deg);
}

#scrool::before {
    display: inline-block;
    content: "";
    position: absolute;
    right: 110px;
    width: 100px;
    height: 50%;
    margin-left: 10px;
    border-bottom: 1px solid #2e9dd9;
    transition: all .2s linear;
}

#greeting {
	position: relative;
	overflow: hidden;
	margin: 7rem 0;
}
#greeting::after {
	content: "";
	background: linear-gradient(160deg, #aed6ec, #0095d4);
	width: 20%;
	height: 1200px;
	position: absolute;
	top: -20%;
	right: 25%;
	z-index: 1;
	transform: rotate(-20deg) ;
}
#greeting > div {
	position: relative;
	z-index: 10;
}

#greeting p {
  line-height: 2.5vw;
  padding: 0 .5vw;
}

#business {
	position: relative;
	overflow: hidden;
	margin: 7rem 0;
}
#business::after {
	content: "";
	background: linear-gradient(-160deg, #aed6ec, #0095d4);
	width: 20%;
	height: 1200px;
	position: absolute;
	top: -20%;
	left: 25%;
	z-index: 1;
	transform: rotate(20deg) ;
}

#business > div {
	position: relative;
	z-index: 10;
}

.bg-boder {
	border: 3px solid #2e9dd9;
	width: 25vw;
	height: 15vw;
}

#property ul li a > div {
	height: 20rem;
	color: #2e9dd9;
	border: 12px solid #2e9dd9; 
}
#property ul li a:hover {
	text-decoration: none;
	  transition: transform .3s;
}

#property h2 {
	width: 100%;
    border-bottom: 5px solid #2e9dd9;
}


#property ul li a:hover > div {
    color: #fff;
	border: 12px solid #59acd9;
	background-color: rgba(46, 157, 217, .4);
  transition-duration: 0.5s;
}
#property ul li a:hover > div h2 {
    border-bottom: 5px solid #fff;
}


.triangle {
  position: absolute;
  bottom: 5px;
  right: 5px;
  border-left: 40px solid transparent;
  border-bottom: 40px solid #2e9dd9;
}
#property ul li a:hover > div .triangle {
  border-bottom: 40px solid #fff;
}

#banner a {
  height: 20vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#banner h2 {
  position: absolute;
  top: 65%;
  right: 10%;
  width: 90%;
  max-width: 50%;
  text-align: center;
  z-index: 123;
  font-size: 100%;
  transition: 0.2s ease-out;

}
#banner a:hover h2 {
  top: 60%;
}
.bnr-ttl-jp,
.bnr-ttl-en {
  height: 2.1vw;
}
.bnr-ttl-jp {
  border-radius: .5vw .5vw 0 0;
}
.bnr-ttl-en {
  border-radius: 0 0 .5vw .5vw;
}

@media (max-width: 1199px){
  
}

@media (max-width: 991px){
  
}
@media (min-width: 768px){
	#greeting-box, 
	#business-box {
		padding-right:7rem;
		padding-left:7rem;
	}
}

@media (max-width: 767px){

  #greeting p {
    line-height: 5vw;
  }
  #gr-text {
    height: 80vw;
  }
  #bg-rellax {
    top: -30vw;
    left: 0;
    height: 180%;
  }
  #banner > div {
    margin-bottom: 10vw;
  }
  #banner a {
    height: 55vw;
  }
  .bnr-ttl-jp,
  .bnr-ttl-en {
    height: 7vw;
  }
  .bnr-ttl-jp {
    border-radius: 1vw 1vw 0 0;
  }
  .bnr-ttl-en {
    border-radius: 0 0 1vw 1vw;
  }
}

@media (max-width: 575px){
#greeting {
	margin: 5rem 0;
}

#business {
	margin: 5rem 0;
}
	#greeting::after {
	width: 30%;
	height: 600px;
	top: -20%;
	right: 25%;
	transform: rotate(-75deg) ;
}

#business::after {
	width: 30%;
	height: 600px;
	top: -20%;
	left: 25%;
	transform: rotate(75deg) ;
}

}