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

body{
    font-family: 'Meiryo';
}
/*ページ遷移アニメーション*/

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

  .main{
    animation: fadeIn 1s forwards;
  }


/*スライドショー*/
.top-slide {
    width: 1140px;
    height: 430px;
    overflow: hidden;
    position: relative;
  }

  .item1 {
    position: absolute;
    top:0;
    animation-duration: 20s; 
    animation-iteration-count: infinite;
    animation-name: Anime; 
    animation-timing-function: ease; 
    opacity: 0; 
  }

  .item1:nth-of-type(1) {
    animation-delay: 0s;
  }

  .item1:nth-of-type(2) {
    animation-delay: 5s;
  }

  .item1:nth-of-type(3) {
    animation-delay: 10s;
  }

  .item1:nth-of-type(4) {
    animation-delay: 15s;
  }

  @keyframes Anime {
    0% {
      opacity: 0;
    }

    16% {
      opacity: 1;
    }

    33% {
      opacity: 1;
    }

    49% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }



body{
    display: flex;
   justify-content: row;
    background-color: rgb(255, 255, 255);
    margin:0;
    padding:0;
}


/*スライドショー*/

.top-logo{
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}


.top-title{
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.top-slide {
        position: relative;
  }


  


/*トップページ*/

.main{
    box-sizing: border-box;
    margin-left:300px;
    padding: 0;

    display:flex;
    height:100%;
    width:1140px;

    flex-direction: column;

}

.top-about{
    
    margin-top:10px;
    padding:0;
    display: flex;
    justify-content: row;
}

.top-about-sentence{
    color: #BEA9A9;
    margin-top: 40px;
    margin-left: 40px;
    font-size: 18px;
}



.top-font{
    font-family: 'Pacifico', cursive;
    font-weight: lighter;
    font-size:46px;
}




.top-about-photo{
    display: flex;
    margin-left: 193px;
    margin-top: 20px;
}

#section1{
    color: #BEA9A9;
    font-size:40px;
    font-weight: lighter;
    margin-left: 40px;
    font-family: 'Pacifico', cursive;

}

.emotions-contents{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.emotions-photo img{
    width: 1140px;
    height: 100%;
    object-fit: cover;
}



.emotions-link1 {
    z-index: 999;
    font-size:32px;
    color:#ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0.8; 
    transition: font-size 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.emotions-link2 {
    z-index: 999;
    font-size:15px;
    color:#ffffff;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0.8; 
    transition: font-size 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.emotions-contents:hover .emotions-link1 {
    font-size: 42px;
    opacity: 1; 
}

.emotions-contents:hover .emotions-link2 {
    font-size: 25px; 
    opacity: 1; 
}

.emotions-photo2{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; 
    transition: opacity 0.3s; 
}

.emotions-contents:hover .emotions-photo2 {
    opacity: 1; 
  }


/*メニュー*/
.menu{
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 300px;
    position: fixed;
    background: #ffffff;
    padding: 0;
    margin:0;
}

.menu-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.menu-items {
    margin-left: 30px;
    padding:0;
}

.menu-items a:link{
    text-decoration: none;
    color:#ADA9A9;
}

.menu-items a:visited{
    text-decoration: none;
    color:#ADA9A9;
}

.menu-items a:hover{
    text-decoration: none;
    color:#ADA9A9;
}

.menu-items2{
    text-decoration:none;
    list-style:none;
    color:#CFCFCF;
}

.menu-link:link{
    color:#CFCFCF;
    text-decoration: none;
}

.menu-link:visited{
    color:#CFCFCF;
    text-decoration: none;
}

.menu-Link:hover{
    color:#CFCFCF;
    text-decoration: none;
}

.menu-Link:link{
    color:#ADA9A9;
    text-decoration: none;
}

.menu-Link:visited{
    color:#ADA9A9;
    text-decoration: none;
}

.menu-Link:hover{
    color:#ADA9A9;
    text-decoration: none;
}


footer{
    margin-left: 30px;
    align-self: flex-end;
    color:#ADA9A9;
}



/*PLACEページ*/

.place-photo{
    width:200px;
    height: 314px;
    object-fit: cover;
}

.emotion.top{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.emotion-top-title{
    z-index: 999;
    font-size:42px;
    color:#ffffff;
    position: absolute;
    top: 109px;
    left: 870px;
    transform: translate(-50%,-50%);
}


.emotions-Place{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50px;
    margin: 50px;
}

.emotions-place{
    flex:1;
    margin-top:50px;
}


.emotions-place-photo{

    margin: 50px;
    overflow: hidden;
}



.place-text{
    margin:0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    font-size: 12px;
}

/*.place-text2{
    margin:0;
    padding: 0;
    font-size: 12px;
}*/

.place-text3{
    margin:0;
    padding: 0;
    font-size: 10px;
}

.emotions-place-photo:hover .place-text {
    opacity: 1;
}


.place-link:link{
    color:black;
    text-align: center;
    text-decoration: none;
}

.place-link:visited{
    color:black;
    text-align: center;
    text-decoration: none;
}

.place-container{
    width:300px;
    height:420px;
}

.place-container:hover{
    background:#F2F2F2;
}


.place-link:hover{
    text-align: center;
    color:black;

    text-decoration: none;
}

.place-ithiran{
    padding: 0;
    margin:0;
    display:flex;
    flex-direction: column;
}

/*紹介ページ*/
.otherangles{
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.top-about-sentence h4{
    margin-top: 0px;
    margin-left: 300px;
    margin-right: 300px;
    margin-bottom: 0px;
}

.top-about-sentence h1{
    margin-top:80px;
    margin-bottom: 0;
}

.emotions-syoukai-top{
    margin-left:80px;
    margin-right: 80px;
    margin-top:40px;
    margin-bottom: 60px;
}

.otherangles-photo{
    margin: 30px;
}

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px; 
}