@charset "UTF-8";
/* CSS Document */
.fluid {
  width: 54vh;
  height: 54vh;
  background: #fff;
  animation: fluidrotate 30s ease 0s infinite;
	position: absolute;
	z-index: -1;
	margin-left: 20%;
}
@keyframes fluidrotate {  
	0%, 100% {
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
	}
	14% {
		border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
	}
	28% {
		border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
	}
	42% {
		border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
	}
	56% {
		border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
	}
	70% {
		border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
	}
	84% {
	border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
	}
}
.btn {
	padding: 30px 0;
}
.btn a {
	font-size: 30px;
	font-family: atrament-web, sans-serif;
    font-weight: 700;
    font-style: normal;
	color: #999;
}
/*矢印が右に移動する*/
.arrow{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}
/*矢印と下線の形状*/
.arrow::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}
.arrow::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.arrow:hover::before{
    left:20%;
}
.arrow:hover::after{
    right:-5%;
}
.mainArea .inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 120px 20px 30px;
}
.mainArea .inner h1 {
	font-size: 60px;
	color: #000;
	line-height: 1;
	font-family: atrament-web, sans-serif;
	font-weight: 700;
	font-style: normal;
}

@media screen and (max-width: 1000px) {
	.fluid {
		width: 30vh;
		height: 30vh;
		margin-left: 5vw;
		margin-top: 60px;
	}
}

@media screen and (max-width: 767px) {
	.fluid {
		margin-top: 70px;
	}
	.mainArea .inner {
		max-width: 100%;
		padding: 120px 5vw 30px;
	}
	.mainArea .inner h1 {
		font-size: 40px;
		color: #000;
		line-height: 1;
		font-family: atrament-web, sans-serif;
		font-weight: 700;
		font-style: normal;
	}
.btn a {
	font-size: 26px;
}
}

@media screen and (max-width: 500px) {
.mainArea .inner {
	padding: 130px 5vw 30px;
	text-align: center;
}
.mainArea .inner h1 {
	font-size: 35px;
}
.btn a {
    font-size: 4.5vw;
}

}