@charset "utf-8";
/* CSS Document */
.nanuka-header{
    position: sticky;
    top: 9%;
    margin-bottom: -80px;
    height: 80px;
    z-index: 3;
}
.nanuka-header-nav{
    display: flex;
        justify-content: center;
    align-items: center;
    width: 67%;
    margin: auto;
        justify-content: space-between;
 padding-top: 23px;
}
.nanuka-header-nav-ul{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
    width: 57%;
    justify-content: flex-start;
}
.nanuka-header-nav-ul li{
    margin-right: 5%;
}

.footer-to-plam{
                position: absolute;
                top: 19.1vw;
                left: 60.9%;
            }
            .footer-to-plam img,.nanoka-footer-nav img{width: 100%;}
            .nanuka-footer{position: relative;}
            .nanoka-footer-nav{
                position: absolute;
                top: 19.4vw;
                left: 43%;
                width: 16.8%;
            }
            .nanoka-footer-1{
                display: flex;
                padding: 0 0 7% 0;
                margin: 0;
                list-style: none;
                width: 100%;
                justify-content: space-between;
                
                
            }
            .nanoka-footer-2{
                display: flex;
                padding: 0;
                margin: 0;
                list-style: none;
                width: 92%;
                justify-content: space-between;
                
            }
            .nanoka-footer-nav1{width: calc(100% * (73 / 318));}
            .nanoka-footer-nav2{width: calc(100% * (64 / 318));}
            .nanoka-footer-nav3{width: calc(100% * (108 / 318));}
            .nanoka-footer-nav4{width: calc(100% * (83 / 292));}
            .nanoka-footer-nav5{width: calc(100% * (76 / 292));}
            .nanoka-footer-nav6{width: calc(100% * (41 / 292));}
.nanoka-footer-nav6 img{display: none;}
.nanoka-footer-nav a:hover{opacity: 0.6;}
    /* 共通設定 */
.nanuka-footer {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    position: relative;
    
}
.nanuka-footer { background-image: url('../img/common/footer.png'); aspect-ratio: 1920 / 649; }



/*slider*//* アニメーションの定義 */
@keyframes show-img { to { opacity: 1; } }
@keyframes hide-img { to { opacity: 0; } }

.nanuka-header-nav-ul li a {
  position: relative;
  display: block;
}

/* 通常時の画像 */
/*.default-img {
  opacity: 1;
  animation: hide-img linear forwards;
  animation-timeline: scroll();

  animation-range: 100vh 100.1vh; 
}*/
  /* 100vhに到達する直前まで維持し、100vhで消える */
/* スクロール後に表示したい画像（b付き） */
.scroll-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: show-img linear forwards;
  animation-timeline: scroll();
  /* 100vhに到達した瞬間に表示される */
  animation-range: 100vh 100.1vh; 
}


/* ロゴの親要素と、メニューのリンク（親要素）を基準点にする */
.header-logo,
.nanuka-header-nav-ul li a {
  position: relative; /* これが重要！中のabsolute画像の基準になります */
  display: inline-block; /* 中身の画像サイズに合わせる */
  vertical-align: middle;
}

/* 通常時の画像 */
.default-img {
  display: block; /* 余計な隙間を消す */
  opacity: 1;
  animation: hide-img linear forwards;
  animation-timeline: scroll();
  animation-range: 199vh 200vh; /* 1画面で切り替え */
}

/* スクロール後に重なる画像（b付き） */
.scroll-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    /* 親要素（画像サイズ）に合わせる */
  height: auto;
  opacity: 0;
  animation: show-img linear forwards;
  animation-timeline: scroll();
  animation-range: 141vh 142vh;
}

/* アニメーションの定義（共通） */
@keyframes hide-img { to { opacity: 0; visibility: hidden; } }
@keyframes show-img { to { opacity: 1; visibility: visible; } }

/*ナビ部分修正*/
            .hm6box {position: relative;}
            .hm6box scroll-img{width: 100%;}
.hm6box a:hover{opacity: 0.6;}
.footer-to-plam a:hover{opacity: 0.6;}
.header-logo a:hover{opacity: 0.6;}
.nanuka-header-nav-ul a:hover{opacity: 0.6;}
.nanuka-header-nav-ul img{width: 100%;}