/* 共通部分 */
@font-face {
    font-family: 'onryou';
    src: url('./fonts/onryou.TTF') format('truetype');
  }

  .kabe {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    aspect-ratio: 1280/1000;
    width: 100%;
    background-color: #000;
    position: relative;
    overflow: hidden;
  }

  .text {
    font-family: 'onryou';
    color: rgba(255, 255, 255, 0.7);
    position: absolute;
    writing-mode: vertical-rl;
    animation-name: text_anime_on;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    font-size: 18px;
    display: inline-block;
    white-space: nowrap;
  }

  .big-font {
    font-size: 3rem;
  }

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

    100% {
      opacity: 1;
    }
  }

  html{
    scroll-behavior: smooth;
    font-size: 100%;
}
body{
    background-color: black;
    line-height: 1.7;
    color: white;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}

/* ヘッタ゛ー */
.origin{
    background-image:url(./img/Kusado-Senken-Haunted-House_Instaicon_20240509.png);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    aspect-ratio: 1280/1000;
    animation-name: bgAnime;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

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

/* お化け女アニメーション */
.fade-in {
    background-image: url('./img/spooky-woman.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 1280/1000;
    opacity: 0;
    animation-name: fadeInOut;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-timing-function: ease;
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/* ナヒ゛ケ゛ーション */
.navbtn{
    padding: 0.5rem;
    color: red;
    font-size: 30px;
    position: fixed;
    right: 10px;
}

.nav{
    position: fixed;
    inset: 0 -100% 0 100%;
    z-index: 100;
    background-color: #0f0b01;
    transition: transform 0.3s;
}

.nav ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 40px;
    list-style: none;
}

.nav a{
    color: rgb(167, 9, 9);
    font-size: 2rem;
    font-family: 'onryou', sans-serif
}

.open .nav{
    transform: translate(-100%, 0);
}

.open .insta_btn {
  display: none;
}

/* .open body{
    position: fixed;
    overflow: hidden;
} */

.open .navbtn{
    z-index: 110;
}

.navbtn .fa-bars{
    display: revert;
}

.open .navbtn .fa-bars{
    display: none;
}

.navbtn .fa-times{
    display: none;
}

.open .navbtn .fa-times{
    display: revert;
}

/* hgroup 草戸千軒文字 */

hgroup{
    width: 60%;
    margin: 100px auto;
    text-align: center;
}

/* メイン */
main{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    gap: 50px;
}

main div h2{
    text-align: center;
    font-size: 2rem;
    line-height: 5rem;
    letter-spacing: 0.5rem;
}

main div p{
    font-size: 1.2rem;
    line-height: 2rem;
    padding-bottom: 1rem;
}

span.red{
    color: red;
}

.Container{
    border-bottom: 1px red solid;
    padding-bottom: 2rem;
}

.smallContainer {
  border: 1px solid white;
  padding: 1rem;
  margin: 0;
}

.smallContainer ul {
  list-style: none;
}

.smallContainer li {
  padding-bottom: 1rem;
}

.link {
    text-align: right;
}



/* フッター */
.googleMap{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 50px 0 50px;
}

footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

footer .title{
    width: 50%;
    height: 50%;
}

footer .hand{
    width: 30%;
    height: 30%;
}

footer .footerContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0 0 50px 0;
}

/* インスタグラムリンク */
.insta_btn {
    display: inline-block;
    text-align: center;/*中央揃え*/
    color: #2e6ca5;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    text-decoration: none;/*下線消す*/
  }

  .insta_btn:hover {/*ホバー時*/
    color:#668ad8;/*文字色*/
    transition: .5s;/*ゆっくり変化*/
  }

  .insta_btn .insta{/*アイコンの背景*/
    position: relative;/*相対配置*/
    display: inline-block;
    width: 50px;/*幅*/
    height: 50px;/*高さ*/
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
    overflow: hidden;/*はみ出た部分を隠す*/
    border-radius: 13px;/*角丸に*/

  }


  .insta_btn .insta:before{/*グラデーションを重ねるため*/
    content: '';
    position: absolute;/*絶対配置*/
    top: 23px;/*ずらす*/
    left: -18px;/*ずらす*/
    width: 60px;/*グラデーションカバーの幅*/
    height: 60px;/*グラデーションカバーの高さ*/
    background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
  }

  .insta_btn .fa-instagram {/*アイコン*/
    color: #FFF;/*白に*/
    position: relative;/*z-indexを使うため*/
    z-index: 2;/*グラデーションより前に*/
    font-size: 35px;/*アイコンサイズ*/
    line-height: 50px;/*高さと合わせる*/
  }

  .footer_icon {
    text-align:center;
   }

/* 遷移ページ用 */
.kaisho {
  text-align: center;
  font-family: 'HG正楷書体-PRO';
}
.kaisho p {
  font-size: 1.5rem;
  margin-bottom: 1em
}
.kaisho a {
  color: white;
  font-size: 1.5rem;
  padding: 1rem;
  margin: 1rem
}
.kaisho a:hover {
  color: red;
  background: white;
  font-weight: bold
}
.kaisho img {
  width: 90%;
  padding-top: 3em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .googleMap {
    margin: auto;
  }

  .googleMap iframe {
    width: 300px;
    height: 300px;
  }

  .Container p {
    font-size: 1rem;
  }
}