@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (min-width: 769px){
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* $$$$$$$$ */
section.behind {
    position: fixed;
    left: 0;
    top: 90px;
    width: 100%;
    height: calc(100vh - 90px);
    background-color: var(--basecolor-gray-03);
}
section.behind .area-movie {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.behind .area-movie video {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* $$$$$$$$ */
section.visual{
    width: 100%;
    height: calc(100vh - 90px);
}
/*----*/
section.visual .layer-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .layer-title .area-title {
    width: 500px;
    margin: 50px auto 0 170px;
}
section.visual .layer-title .area-title h1 {
    position: relative;
    padding: 0 0 40px 0;
}
section.visual .layer-title .area-title h1 b {
    position: absolute;
    left: 2px;
    top: 36px;
    line-height: 1.4;
    font-size: 100px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--basecolor-gray-03);
    white-space: nowrap;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition-property: clip-path;
    transition-duration: 1.1s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title h1 b.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span {
    display: inline-block;
    vertical-align: top;
    position: relative;
    background-image: var(--gradient-char-01);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.4;
    white-space: nowrap;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span.n1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition-property: clip-path;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title h1 span.n2 {
    font-size: 100px;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition-property: clip-path;
    transition-duration: 1.1s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title .jump {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}
section.visual .layer-title .area-title .jump.appear {
    opacity: 1;
}
section.visual .layer-title .area-title .jump .mybutton1 {
    width: 280px;
    height: 55px;
    line-height: 55px;
    text-indent: 1em;
    font-size: 19px;
}
section.visual .layer-title .area-title .jump .mybutton1 i {
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
} @media all and (max-width: 768px) and (orientation: portrait){
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* $$$$$$$$ */
section.behind {
    position: fixed;
    left: 0;
    top: 50px;
    width: 100%;
    height: calc(100dvh - 50px);
    background-color: var(--basecolor-gray-03);
}
section.behind .area-movie {
    position: absolute;
    0:
    AUTO 100PX;
    left: -54%;
    top: 39%;
    width: 170%;
    height: 0;
}
section.behind .area-movie video {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

/* $$$$$$$$ */
section.visual{
    width: 100%;
    height: calc(100dvh - 50px);
}
/*----*/
section.visual .layer-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .layer-title .area-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45%;
    padding: 0 6vw 0 6vw;
}
section.visual .layer-title .area-title h1 {
    padding: 18vw 0 2vw 0;
}
section.visual .layer-title .area-title h1 b {
    position: absolute;
    left: 6.4vw;
    top: 29.4vw;
    font-size: 17vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--basecolor-gray-03);
    white-space: nowrap;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition-property: clip-path;
    transition-duration: 1.1s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title h1 b.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span {
    display: inline-block;
    vertical-align: top;
    background-image: var(--gradient-char-01);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.4;
    white-space: nowrap;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span.n1 {
    font-size: 5.2vw;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition-property: clip-path;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title h1 span.n2 {
    font-size: 17vw;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition-property: clip-path;
    transition-duration: 1.1s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title .jump {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}
section.visual .layer-title .area-title .jump.appear {
    opacity: 1;
}
section.visual .layer-title .area-title .jump .mybutton1 {
    width: 74vw;
    height: 15vw;
    line-height: 15vw;
    text-indent: 1.5em;
    font-size: 4.4vw;
}
section.visual .layer-title .area-title .jump .mybutton1 i {
    left: 75%;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
} @media all and (max-width: 768px) and (orientation: landscape){
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* $$$$$$$$ */
section.behind {
    position: fixed;
    left: 0;
    top: 50px;
    width: 100%;
    height: calc(100dvh - 50px);
    background-color: var(--basecolor-gray-03);
}
section.behind .area-movie {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.behind .area-movie video {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* $$$$$$$$ */
section.visual{
    width: 100%;
    height: calc(100dvh - 50px);
}
/*----*/
section.visual .layer-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .layer-title .area-title {
    width: 80vh;
    margin: 6vh auto 0 6vh;
}
section.visual .layer-title .area-title h1 {
    padding: 0 0 2vh 0;
}
section.visual .layer-title .area-title h1 b {
    position: absolute;
    left: 6.6vh;
    top: 15.6vh;
    font-size: 14vh;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--basecolor-gray-03);
    white-space: nowrap;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition-property: clip-path;
    transition-duration: 1.1s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title h1 b.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span {
    display: inline-block;
    vertical-align: top;
    background-image: var(--gradient-char-01);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.4;
    white-space: nowrap;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span.appear {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
section.visual .layer-title .area-title h1 span.n1 {
    font-size: 4.4vh;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition-property: clip-path;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title h1 span.n2 {
    font-size: 14vh;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition-property: clip-path;
    transition-duration: 1.1s;
    transition-timing-function: ease-out;
}
section.visual .layer-title .area-title .jump {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}
section.visual .layer-title .area-title .jump.appear {
    opacity: 1;
}
section.visual .layer-title .area-title .jump .mybutton1 {
    width: 41vh;
    height: 10vh;
    line-height: 10vh;
    text-indent: 1em;
    font-size: 3.4vh;
}
section.visual .layer-title .area-title .jump .mybutton1 i {
    left: 75%;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
} /* end of media query */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */