* {
  box-sizing: border-box;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
  
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Francois One', sans-serif;
  font-family: 'Sorts Mill Goudy', serif;
  box-sizing: border-box;
  height: auto;
	min-height: 100%;
animation: fadeIn 3s forwards;
position: relative;
}


header {
  padding: 20px 4% 10px;
  position: fixed;
  top: 0;
  width: 100%;
  background-color:rgba(124, 124, 124, 0.5);
  display: flex;
  align-items: center;
  z-index: 6;
}
h1 {
  margin: 0; padding: 0;
  font-size: 20px;
  letter-spacing: 0.12em;
}
a {	
  text-decoration: none;
  color: #ffffff;
}
nav {
  margin: 0 0 0 auto;
}
ul {
  list-style: none;
  margin: 0;
  display: flex;
}
li {
  margin: 0 0 0 50px;
  font-size: 14px;
}

nav ul ul{
	display: block;
}

nav ul li{
	position: relative;
}

nav ul li a {
  transition: .3s;
  position: relative;
  padding: 0 px;
  transition:all .3s;
}

nav ul li a::after {
  content: '';
  display: block;
  height: 1px;
  width: 80%;
  background: #ffffff;
  position: absolute;
  bottom: 0;
  left: 10%;
  transform: scale(0, 1);
  transition: .3s;
}


nav ul li a:hover::after {
  transform: scale(1, 1);
}

/*下の階層を持っているulの指定*/
nav li.has-child ul{
  /*絶対配置で位置を指定*/
position: absolute;
left:-37px;
top: 35px;
z-index: 4;
  /*形状を指定*/
background:#bebebe00;
width:135px;
height:98px;
  /*はじめは非表示*/
visibility: hidden;
opacity: 0;
  /*アニメーション設定*/
transition: all .3s;
}

nav li.has-child li {
right: 60px;
list-style-type: disc;
color: #ffffff;
line-height: 30px
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
visibility: visible;
opacity: 1;
}


.main-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background:url("images/DSC02687.JPG") top center / cover no-repeat;
  background-attachment: fixed;
  flex-direction: column;
   
  
}
.main-visual2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background:  url("images/Logo.png"),url("images/DSC02756.jpg") top center;
  background-repeat: no-repeat,no-repeat;
  background-attachment: fixed;
  background-position: top 250px left 700px ,center center;
  background-size: 40%,cover;
  
}

.main-visual3{
  height: 35vh;
  color: white;
  text-align: center;
}

.main-visual3:before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /* 重要 */
  background-image: url("images/DSC_0251.JPG");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
 
}

.under-area{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vw;
  padding-top: 100px;
  background: #dadada;
  
}

.main-visual4 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url("images/DSC_0371.JPG") top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  
}

.title{
  margin: 0;
  font-size: 55px;
  font-weight: 800;
  color: transparent; /*テキストを透明にしてtext-shadowだけ表示する*/
  animation-name: blur-title;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}
@keyframes blur-title {
  0% {
    text-shadow: 0 0 100px #ffffff;
    opacity: 0;
  }
  5% {
    text-shadow: 0 0 70px #ffffff;
  }
  10% {
    opacity: 1;
  }
  20% {
    text-shadow: 0 0 0px #ffffff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0px #ffffff;
  }
}

.text{
  margin: 0;
  font-size: 30px;
  font-weight: normal;
}

.text span {
  /*各テキストにanimationを設定*/
  color: transparent; /*テキストを透明にしてtext-shadowだけ表示する*/
  animation-name: blur-text;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

/*一文字ずつ遅延させる*/
span:nth-child(1) {
  animation-delay: 0.15s;
}
span:nth-child(2) {
  animation-delay: 0.3s;
}
span:nth-child(3) {
  animation-delay: 0.45s;
}
span:nth-child(4) {
  animation-delay: 0.6s;
}
span:nth-child(5) {
  animation-delay: 0.75s;
}
span:nth-child(6) {
  animation-delay: 0.9s;
}
span:nth-child(7) {
  animation-delay: 1.05s;
}
span:nth-child(8) {
  animation-delay: 1.2s;
}
span:nth-child(9) {
  animation-delay: 1.35s;
}
span:nth-child(10) {
  animation-delay: 1.5s;
}
span:nth-child(11) {
  animation-delay: 1.45s;
}

/* フェードインの設定 */
@keyframes blur-text {
  0% {
    text-shadow: 0 0 100px #ffffff;
    opacity: 0;
  }
  5% {
    text-shadow: 0 0 90px #ffffff;
  }
  15% {
    opacity: 1;
  }
  20% {
    text-shadow: 0 0 0px #ffffff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0px #ffffff;
  }
}


  

.title2 {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  letter-spacing : 3px;
  
    opacity: 0;
  }



.title3 {
  position: fixed;
  top: 60%;
  left: 50%;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  letter-spacing : 3px;
}


.name {
  position: fixed;
  top: 26%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  font-family: 'Oooh Baby', cursive;
}

.name2 {
  position: fixed;
  top: 36%;
  left: 35%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  width: 100%;
  text-align: center;
  font-family: 'Klee One', cursive;
  letter-spacing : 4px;
}
.profile2 {
  position: fixed;
  top: 60%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  font-family: 'Klee One', cursive;
  letter-spacing : 2px;
  line-height: 40px
}

.images {position: absolute;
  scale: 50%;
  vertical-align:top;
  transform: translateY(-50%);
  z-index: 2;
}


 


  

  .form{
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  width: 100%;
  text-align: center;
  font-family: 'Klee One', cursive;
  letter-spacing : 4px;
  }



  .fade {
    opacity: 0;
  }
    
    #gallery {
      display: grid;
      max-width: 1000px;
      margin: auto;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }
    
    .img-item {
      opacity: 0;
      filter: blur(10px);
      width: 100%;
    }
    
    .img-item img {
      width: 100%;
      height: auto;
    }
    
    .img-item p {
      text-align: center;
      color: #ffffff;
    }
    
    footer {
      text-align: center;
      color: #EEE;
    }

    @media (max-width: 767px) {
      /* スマホ向けのスタイル */
    }