@charset "UTF-8";

/*--------------------------------------------
SETTINGS
---------------------------------------------*/
:root{
  --breakpoint : 768px;
}
@media screen and ( width <= 768px ){
  :root{
    --viewportWidth : 768;
    --gutter : 50;
    --content : 668;
    --viewport : 100% / var(--viewportWidth);
    --rem : 100vw / var(--viewportWidth);
  }
}
@media screen and ( width > 768px ){
  :root{
    --viewportWidth : 1180;
    --gutter : 50;
    --content : 1080;
    --viewport : min( 1px , 100% / var(--viewportWidth) );
    --rem : min( 1px , 100vw / var(--viewportWidth) );
  }
}
/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/
#mv{
  position: relative;
  overflow-x: clip;
  h1{
    position: absolute;
    visibility: hidden;
  }
  #ig{
    position: relative;
    width: calc( 1118 * 100% / 892 );
    top: 0;
    height: auto;
    left: calc( -132 * 100% / 892 );
    #clouds{
      pointer-events: none;
    }
    path{
      fill:transparent;
    }
    a{
      .hover{
        opacity: 0;
      }
      &:hover{
        .hover{
          opacity: 1;
        }
        .bg{
          opacity: 0;
        }
      }
      .bg{
        path{
          opacity: 1;
          fill:white;
        }
      }
    }
  }
}
@media ( prefers-reduced-motion : no-preference ){
  :is( .cloud , .bird ){
    opacity: 0;
    translate : 0 calc( -30 * var(--rem) );
  }
  #ig.is-loaded{
    :is( .cloud , .bird ){
      opacity: 1;
      animation: float 5s ease-in-out infinite;
      transition: opacity 1s ease-in-out;
    }
  }
  :is( #posts0101 , #building0201 , #building0202 ,  #torii01 , #iwakura0301 ,  #building0301 , #building0401 , #building0501 , #building0601 , #building0701 , #building0901 , #building0902 ){
    translate: 0 calc( -25 * var(--rem) );
    opacity: .01;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: .1s;
    transition-property: translate , opacity;
    &.is-fadeDown{
      opacity: 1;
      translate: 0 0;
    }
  }
  #ig a .hover , #ig a .bg{
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
  }
}
@keyframes float {
  0%,
  100% {
    translate : 0 calc( -30 * var(--rem) );
  }
  50% {
    translate : 0 0;
  }
}

/*--------------------------------------------
SNS
---------------------------------------------*/

#mv{
  .sns{
    display: grid;
    align-items: center;
    justify-content: start;
    position: absolute;
    grid-auto-flow: column;
    z-index: 5;
    top : calc( 134 * var(--rem)  );
    left : calc( 50 * var(--viewport) );
    column-gap : calc( 12 * var(--rem) );
    img{
      aspect-ratio: 1;
      width: auto;
      height : calc( 40 * var(--rem ) );
    }
  }
}

/*--------------------------------------------
TOOL TIPS
---------------------------------------------*/

#mv{
  .tips{
    a{
      display: grid;
      place-items: center;
      position: absolute;
      border-radius : 100vmax;
      font-size : calc( 14 * var(--rem ) );
      background-color: #f8f8f2;
      font-family: "Montserrat", sans-serif;
      width: fit-content;
      outline:solid 1px #333;
      outline-offset: -1px;
      padding : calc( 5 * var(--rem ) )  calc( 40 * var(--rem ) );
      line-height : calc( 24.5 / 14 );
      opacity: 0;
      transition: opacity .3s ease-in;
      white-space: pre;
      &:after{
        content:"";
        background : url( "../css/background/arrow.png" ) center / contain no-repeat;
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        transition: right 0.3s ease;
        aspect-ratio: 17/28;
        width: auto;
        height : calc( 8 * var(--rem ) );
        right: calc( 11 * var(--rem) );
        pointer-events: none;
        transition: right .3s ease-in;
      }
      &:hover{
        opacity: 1;
        &:after{
          right: calc( 7 * var(--rem) );
        }
      }
    }
  }
}
#tips01{
  translate: -100%;
}
#tips02 , #tips03 , #tips06 , #tips07 , #tips09 , #tips10 , #tips11 , #tips12{
  translate: -50% 0;
}
#mv:has( #posts0101:hover ) #tips01{
  opacity: 1;
}
#mv:has( #iwakura0301:hover ) #tips02{
  opacity: 1;
}
#mv:has( #building0201:hover ) #tips03{
  opacity:1;
}
#mv:has( #building0301:hover ) #tips04{
  opacity:1;
}
#mv:has( #building0401:hover ) #tips05{
  opacity:1;
}
#mv:has( #building0202:hover ) #tips06{
  opacity:1;
}
#mv:has( #building0501:hover ) #tips07{
  opacity:1;
}
#mv:has( #building0601:hover ) #tips08{
  opacity:1;
}
#mv:has( #building0701:hover ) #tips09{
  opacity:1;
}
#mv:has( #building0901:hover ) #tips10{
  opacity:1;
}
#mv:has( #newYear2026shop01:hover ) #tips11{
  opacity:1;
}
#mv:has( #newYear2026building02:hover ) #tips12{
  opacity:1;
}


/*--------------------------------------------
NEW YEAR
--------------------------------------------*/
#label_newYear{
  position: absolute;
  height : calc( 120 * var(--rem ) );
  top : calc( 12 * var(--rem ) + 70px );
  left : calc( 12 * var(--viewport ) );
  width: fit-content;
  z-index: 1;
}
#mv.newYear{
  #roads #people01 ,#roads #flowers01 ,
  #people0201 , #flowers0201 , #flowers0202 , #flowers0203 , #flowers0501 , #people0701 , #flowers0701 , #flowers0901 , #building0902 , #people0901 , #sign0901 , #building1001{
    display: none;
  }
  #newYear2026flowers04{
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
  }
  #ig:has( #building0301:hover ){
    #newYear2026flowers04{
      opacity: 1;
    }
  }
  #newYear{
    pointer-events: none;
  }
  #newYear2026building02 , #newYear2026shop01{
    pointer-events: all;
  }
  .sns{
    top : calc( 70px + ( 132 + 12 ) * var(--rem) );
  }
}