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

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

body {
font-family:  "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN",  "Yu Gothic", "Meiryo", sans-serif;
width: 100%;
}

h1{
font-family: "Arial Black",sans-serif;
font-size: 110px;
color: #f2f2f2;
margin: 0;
padding: 0;
}

.mainArea{
background-color: #f2f2f2;
margin:-20px auto 0;
width:100%;
padding:10px;
}

.box{
font-size: 23vw;
font-family: "Arial Black",sans-serif;
color: rgba(0,0,0,0); 
background: linear-gradient(310deg, #3bffcd, #fff021, #ff21a8, #21f3ff);
background-size: 800% 800%;
-webkit-animation: gb-gradietion 30s ease infinite;
-moz-animation: gb-gradietion 30s ease infinite;
animation: gb-gradietion 30s ease infinite;
background-position:center;
-moz-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
}
.box p{
margin-top: -0.4em;
}

@-webkit-keyframes gb-gradietion {
0%{background-position:0% 11%}
50%{background-position:100% 90%}
100%{background-position:0% 11%}
}
@-moz-keyframes gb-gradietion {
0%{background-position:0% 11%}
50%{background-position:100% 90%}
100%{background-position:0% 11%}
}
@keyframes gb-gradietion {
0%{background-position:0% 11%}
50%{background-position:100% 90%}
100%{background-position:0% 11%}
}

.secArea{
position: relative;
padding: 10px;
  background: linear-gradient(181deg, #f2f2f2, #7f7f7f);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;

}
.textArea{
position: relative;
z-index: 1;
padding-bottom: 30px;
}
.text-B{
font-size: 15vw;
font-family: "Arial Black",sans-serif;
color: #f2f2f2;
}

#hoge{
  width:100%;
  margin:0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

@-webkit-keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

.contactArea{
position: relative;
width: 100%;
height: 700px;
padding-top:100px;
text-align: center;

}
.name-img01{
position:absolute;
width: 80%;
top:300px;
left: 10%;
}
.name-img02{
position:absolute;
width: 80%;
top: 250px;
left: 10%;
}
.contactArea img{
width: 100%;
}
.contactInner{
position: relative;
}
.contactInner h3{
font-family: "Raleway",sans-serif;
font-size: 45px;
padding-bottom: 80px;
letter-spacing: 0.6em;
}
.contactInner p{
padding-bottom: 20px;
font-size: 12px;
}



.copyright{
clear: both;
color: #d4d4d4;
width: 100%;
margin-top: 100px;
margin-bottom: 50px;
text-align: center;
display: block;
}

@media screen and (max-width: 640px) {
h1{
font-family: "Arial",sans-serif;
font-size: 8vw;
color: #f2f2f2;
margin: 0;
padding: 0;
font-weight: bold;
}
.mainArea{

margin:-7px auto 0;

}
.box,.text-B{
font-family: "Arial",sans-serif;
font-weight: bold;
}
.box{
font-size: 30vw;
}
.text-B{
font-size: 18vw;
}
.contactArea{
height: 500px;
}
.name-img01{
position:absolute;
width: 80%;
top:330px;
left: 10%;
}
.name-img02{
position:absolute;
width: 80%;
top: 320px;
left: 10%;
}
.contactArea img{
width: 100%;
}
.contactInner{
position: relative;
}
.contactInner h3{
font-family: "Raleway",sans-serif;
font-size:25px;
padding-bottom: 80px;
letter-spacing: 0.6em;
padding-right: -0.6em;
}
.contactInner p{
padding-bottom: 20px;
font-size: 12px;
}


}