@charset "utf-8";

/*================*/
:root {
    --height-header-lsize: 85px;
    --height-bottom-lsize: 85px;
    --height-header-ssize: 12vw;
    --height-bottom-ssize: 21vw;
}

/*================*/
.anmDiveView{
    animation-name: anm_dive_view_01,anm_dive_view_02;
    animation-duration: 1.1s;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(1,0,1,1);
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.anmDiveView.anmType01{
    transform-origin: 12% 43%;
}
.anmDiveView.anmType02{
    transform-origin: 47% 61%;
}
.anmDiveView.anmType03{
    transform-origin: 80% 72%;
}
@keyframes anm_dive_view_01{
      0%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes anm_dive_view_02{
      0%{transform: scale( 1, 1);}
    100%{transform: scale(13,13);}
}
.anmBackToSky{
    animation-name: anm_back_to_sky_01,anm_back_to_sky_02;
    animation-duration: 1.1s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
@keyframes anm_back_to_sky_01{
      0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes anm_back_to_sky_02{
      0%{transform: scale(1.4,1.4);}
    100%{transform: scale(  1,  1);}
}
.anmLeaveSpot{
    animation-name: anm_leave_spot_01,anm_leave_spot_02;
    animation-duration: 0.2s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
@keyframes anm_leave_spot_01{
      0%{opacity: 1;}
    100%{opacity: 0;}
}
@keyframes anm_leave_spot_02{
      0%{transform: translateY(  0);}
    100%{transform: translateY(-10%);}
}
.anmEnterSpot{
    animation-name: anm_enter_spot_01,anm_enter_spot_02;
    animation-duration: 0.7s;
    animation-delay: 0s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: 50% 50%;
}
@keyframes anm_enter_spot_01{
      0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes anm_enter_spot_02{
      0%{transform: scale(2,2);}
    100%{transform: scale(1,1);}
}

/*================*/
html {
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}
body, html {
    overflow: hidden;
    height: 100%;
}
body {
    background-image: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(160,160,160,1) 100%);
}

/*================*/
a,
label{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
figure,
.figelm{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    -webkit-backface-visibility: hidden;
}