@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Geist+Mono:wght@100..900&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-image: url("../img/tahara4.jpg");
  width: 100%;
  height: 100vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background-position: right top; */
  animation: bodyfadeIn 3s ease 0s 1 normal;
  -webkit-animation: bodyfadeIn 3s ease 0s 1 normal;
}
body::after{
  content:"";
  position: fixed;
  top:0px;
  left:0px;
  width: 100%;
  min-height: 100vh;
  background-color: black;
  opacity: 0.6;
  z-index: -1;
}
.head{
  position: absolute;
  height: 100vh;
  width: 100%;
  top:0px;
  left: 0px;
}
@keyframes bodyfadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes bodyfadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
.title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color:#fff;
  font-size: 2rem;
  white-space: nowrap;
  letter-spacing: 0.3rem;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
header{
  width: auto;
  height: 80px;
  position: absolute;
  right: 20px;
}
.header_nav{
  height: 100%;
}
.header_nav  ul{
  display: flex;
  height: 100%;
}
.header_nav ul li{
  list-style: none;
  display: flex;
  align-items: center;
  margin-right: 50px;
}
.header_nav ul li a{
  height: auto;
  font-size: 1.3rem;
  text-decoration: none;
  color:#fff;
  letter-spacing: 0.3rem;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  position: relative;
}
.header_nav ul li a::after {
  background-color: antiquewhite; /* 下線の色 */
  bottom: -1px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 1px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
  }
  .header_nav ul li a:hover{
    color:antiquewhite;
  }
  .header_nav ul li a:hover::after {
    transform: scale(1, 1);    /*ホバー後、x軸方向に1（相対値）伸長*/
    }


  @keyframes showTextFromBottom{
0%{
   transform: translateY( 100% );

}
100%{
    transform: translateY( 0px );
}
}
.top-ttl{
  text-align: center;
}
.textanimation span{
animation: showText 0.1s backwards;
display: inline-block;
letter-spacing: 6px;
font-size: 34px;
}
.textanimation > span{
overflow: hidden;
}
.textanimation > span > span{
animation: showTextFromBottom 0.5s backwards;
}
#cursor{
  pointer-events: none;
  width:20px;
  height: 20px;
  background: rgba(150,30,30,0.6);
  position: fixed;
  top:-16px;
  left:-16px;
  border-radius: 50%;
  transition: all 0.15s;
  /* background-image: url('../img/soccerball.png');
  background-size: 20px; */
  opacity: 1;
}
section{
  position: absolute;
  margin: 0 auto;
  bottom:0;
}
.top-ttl{
  display: inline-block;
  padding: 10px 20px;
  transition: all 0.4s;
}
/* 
.top-ttl:hover{
  background-color: #ceb849;
} */
 /* .textlink01{
  z-index: 10;
 } */ */
/* .textlink01::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #ceb849;
	transform: scaleX(0);
	transition: transform 0.3s;
}
.textlink01:hover::after {
	transform: scaleX(1);
  transform: scaleY(1);
} */
.top-ttl a{
  width: 100%;
  text-decoration: none;
  color:#ceb849;
  transition: all 0.5s ease-out;
}
.top-ttl a:hover{
  color:#fff;
}
a {
	text-decoration: none;
	font-weight: 700;
  color: #ceb849;
  position: relative;
}

.top-ttl a::before {
  content: '';
  background-color:#ceb849;
  position: absolute;
  left: -110%;
  /* translate: (-100%,0); */
  bottom: 3px;
  width: 220%;
  height: 5px;
  z-index: -1;
  transition: all .5s ease-in-out;
}

.top-ttl a:hover::before {
  bottom: 0;
  height: 100%;
}

@media screen and (max-width: 630px) {
  .textanimation span{
    font-size: 24px;
    }
}

@media screen and (max-width: 420px) {
  .textanimation span{
    font-size: 20px;
    letter-spacing: 3px;
    }
}