@charset "utf-8";
/* CSS Document */

/*-------------------mainVisual-------------------*/

#mainVisual{
	width: 100%;
	min-height:100vh;
	position: relative;
}

#triangle{
	transform:rotate(100deg);
	animation:rotate_anime 1s;/* rotate_animeを1秒かけて実行する */
	margin: 10% 40% 0 10% ;
	position:absolute;
	z-index: 0;
	opacity: 0.7;
}
    @keyframes rotate_anime {
        0% {
            transform:rotate(0deg);/* アニメーションの進みが0%の時の状態 */
        }
        100% {
            transform:rotate(100deg);/* アニメーションの進みが100%の時の状態 */
        }
    }

#square{
	margin:18% 20% 0 40%;
	transform:rotate(-80deg);
	position: absolute;
	z-index:0;
	opacity: 0;
}
#triangle img{
	width: 100%;
	height: auto;
}

#square img{
	width: 120%;
	height: auto;
}

#mainVisual p{
	font-family: "Times New Roman", Times, serif;
	font-size: 380%;
	position: absolute;
	z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 90%;
  height: 3.2rem;
  text-align:center;
}
.css-fade3{
  animation-name:fade-in3;
  animation-duration:1.5s; 
  animation-timing-function: ease-out; 
  animation-delay:0.5s; 
  animation-iteration-count:1;
  animation-direction:normal; 
  animation-fill-mode: forwards; 
}
@keyframes fade-in3 {
  0% {opacity: 0; transform: translate3d(0,-30px,0);}
  100% {opacity: 0.7; transform: translate3d(0,0,0) rotate(-80deg);}
}

/*----------------h2-decoration----------------------*/

hgroup{
	position: absolute;
	top:15vh;
	left:0;
	right: 0;
	margin: auto;
	text-align: center;
}
hgroup .eng{
	font-size: 250%;
	font-family: "Times New Roman", Times, serif;
	text-shadow:0px 0px 5px #FFF ;
}
hgroup .jap{
	font-size: 300%;
	font-family: "Times New Roman", Times, serif;
	text-shadow:0px 0px 5px #FFF ;
}
/*-------------------service-------------------*/


section{
	min-height: 100vh;
	position: relative;
}
.bg1{
	margin-left: 30%;
	height: 40vh;
	background: url(../images/service1.jpg) no-repeat;
}
.bg2{
	margin-right: 30%;
	height: 40vh;
	background: url(../images/works1.jpg) no-repeat;
}
.bg3{
	margin-left: 30%;
	height: 40vh;
	background: url(../images/about1.jpg) no-repeat;
}
.bg4{
	margin-right: 30%;
	height: 40vh;
	background: url(../images/contact1.jpg) no-repeat;
}


dl{
	min-height:50vh;
	margin: 10% 0;
	
}
dt{
	width: 55%;
	margin:0 auto;
	text-align: center;
	line-height: 2;
}
dd{
	text-align: center;
	margin: 5% 0;
}
dd a{
	display: inline-block;
	border-radius: 5%;          /* 角丸       */
	font-size: 130%;        /* 文字サイズ */
	text-align: center;      /* 文字位置   */
	cursor: pointer;     /* カーソル   */
	padding: 12px 24px;   /* 余白       */
	background: #4bc97e;     /* 背景色     */
	color: #ffffff;     /* 文字色     */
	line-height: 1em;         /* 1行の高さ  */
	transition: .3s;         /* なめらか変化 */
	box-shadow: 3px 3px 3px #666666;  /* 影の設定 */
	border: solid 1px #4bc97e;
}
dd a:hover{
	background: #ffffff;     /* 背景色     */
	color: #4bc97e;     /* 文字色     */
	box-shadow: none;  /* 影の設定 */
	border: solid 1px #4bc97e;
	box-shadow: 3px 3px 3px #ffffff;  /* 影の設定 */
}


@media screen and (max-width: 960px) {
#triangle{
	margin: 40% 40% 0 10% ;
}
#square{
	margin:48% 20% 0 40%;
}

.br::before {
	content: "\A" ;
	white-space: pre ;
}
hgroup{
	top:20vh;
}
.bg1{
	height: 50vh;
	background: url(../images/service3.jpg) no-repeat right top;
	margin:0;
}
.bg2{
	height: 50vh;
	background: url(../images/works3.jpg) no-repeat;
	margin:0;
}
.bg3{
	height: 50vh;
	background: url(../images/about3.jpg) no-repeat right top;
	margin:0;
}
.bg4{
	height: 50vh;
	background: url(../images/contact3.jpg) no-repeat;
	margin:0;
}
dl{
	min-height:20vh;
	margin: 20% 0;
}
dl dt{
	width: 95%;
	margin:0 auto;
	text-align: center;
	line-height: 2;
	font-size: 100%;
}
dd{
	text-align: center;
	margin: 10% 0;
}

}
@media screen and (max-width: 560px) {
#triangle{
	margin: 70% 40% 0 10% ;
}
#square{
	margin:78% 20% 0 40%;
}
#mainVisual p{
	font-size: 250%;
}

.br::before {
	content: "\A" ;
	white-space: pre ;
}
hgroup .eng{
	font-size: 200%;
}
hgroup .jap{
	font-size: 250%;
}
dl dt{
	width: 95%;
	margin:0 auto;
	text-align: center;
	line-height: 2;
	font-size: 86.5%;
	}
dl .no-br{
	text-align: left;
}

dl .no-br br{
	display: none;
}
dd a{
	font-size: 100%;
}


}