@charset "UTF-8";
* {
    box-sizing: border-box;
}
::before,
::after {
    box-sizing: inherit;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
    margin: 0;
}
main {
    display: block;
}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
dt {
    font-weight: bold;
}
dd {
    margin-left: 0;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid;
    margin: 0;
    clear: both;
    color: inherit;
}
pre {
    font-family: monospace;
    font-size: inherit;
}
address {
    font-style: inherit;
}
a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}
abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: under-pageline dotted;
    text-decoration: under-pageline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace;
    font-size: inherit;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    margin: 0;
    padding: 0;
    display: block;
}

embed,
object,
iframe {
    border: 0;
    vertical-align: bottom;
}
button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
}
[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}
[type=radio] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}
button,
input {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
    cursor: default;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
}
option {
    padding: 0;
}
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type=checkbox],
[type=radio] {
    padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}
[type=search] {
    outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
label[for] {
    cursor: pointer;
}
details {
    display: block;
}
summary {
    display: list-item;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption {
    text-align: left;
}
td,
th {
    vertical-align: top;
    padding: 0;
}
th {
    text-align: left;
    font-weight: bold;
}
template {
    display: none;
}
[hidden] {
    display: none !important;
}
html {
    --ease-origin-1: cubic-bezier(.34,.59,.06,1.01);
    --ease-lock: cubic-bezier(.64,-0.67,.31,1.54);
    --duration-origin: 0.6s;
    --duration-origin-1: 0.6s;
}
html {
    font-feature-settings: "palt" 1;
    font-size: calc(100 / var(--base-vw) * 1 * 1vw);
    --max-width: 1920px;
}
@media (min-width: 751px) {
    html {
        --base-vw: 1920;
        min-height: 100%;
    }
}
@media (max-width: 750px) {
    html {
        --base-vw: 393;
    }
}
html, body {
    max-width: 100vw;
    color: var(--color-white-100);
}
html ::selection, body ::selection {
    background: var(--select-fill-color);
    color: var(--select-text-color);
}
html ::-moz-selection, body ::-moz-selection {
    background: var(--select-fill-color);
    color: var(--select-text-color);
}
body {
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}
span, div {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    letter-spacing: inherit;
}
svg path {
    transform-origin: center center;
}
svg text {
    font-family: rfceqabro-display, "Yu Gothic Medium", "Yu Gothic", YuGothic, "A+EqpB-游ゴシック体 Pr6N M", selif;
}
video {
    max-width: 100vw;
    object-fit: cover;
}
picture {
    display: block;
}
picture source, picture img {
    width: 100%;
    height: 100%;
}
a {
    cursor: pointer;
    line-height: 1;
}
a > * {
    pointer-events: none;
}
p {
    text-align: justify;
}


.en{
    font-family: azo-sans-web, sans-serif;
}

.sub-en{
    /* font-family: "futura-pt", sans-serif; */
}

.bold{
    font-weight: bold !important;
}

input, select , button {
    -webkit-appearance: none;
    appearance: none;
}

.en-txt-jN{
    text-align: left;
}

.w-on{
    display: block !important;
}

/* ==========================================================
!COMMONS
========================================================== */

/* commons part
------------------------------------ */

.flexs{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flexs-in{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.b10{
    width: 10%;
    position: relative;
}
.b20{
    width: 20%;
    position: relative;
}
.b25{
    width: 25%;
    position: relative;
}
.b30{
    width: 30%;
    position: relative;
}
.b35{
    width: 35%;
    position: relative;
}
.b40{
    width: 40%;
    position: relative;
}
.b45{
    width: 45%;
    position: relative;
}
.b48{
    width: 48%;
    position: relative;
}
.b49{
    width: 49%;
    position: relative;
}
.b50{
    width: 50%;
    position: relative;
}
.b55{
    width: 55%;
    position: relative;
}
.b60{
    width: 60%;
    position: relative;
}
.b65{
    width: 65%;
    position: relative;
}
.b70{
    width: 70%;
    position: relative;
}
.b75{
    width: 75%;
    position: relative;
}
.b80{
    width: 80%;
    position: relative;
}
.b90{
    width: 90%;
    position: relative;
}
.b100{
    width: 100%;
    position: relative;
}


.td1{
    transition-delay: 50ms !important;
}
.td2{
    transition-delay: 100ms !important;
}
.td3{
    transition-delay: 150ms !important;
}
.td4{
    transition-delay: 200ms !important;
}
.td5{
    transition-delay: 250ms !important;
}
.td6{
    transition-delay: 300ms !important;
}
.td7{
    transition-delay: 350ms !important;
}
.td8{
    transition-delay: 400ms !important;
}
.td9{
    transition-delay: 450ms !important;
}
.td10{
    transition-delay: 500ms !important;
}
.td11{
    transition-delay: 550ms !important;
}
.td12{
    transition-delay: 600ms !important;
}
.td13{
    transition-delay: 650ms !important;
}
.td14{
    transition-delay: 700ms !important;
}
.td15{
    transition-delay: 750ms !important;
}
.td16{
    transition-delay: 800ms !important;
}

.trs{
    transition: 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    transform: translate(0px, 10px);
}

.iB{
    display: inline-block;
}

.atag{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.in{
    width: 100%;
    position: relative;
}

.in-in{
    width: 100%;
    position: relative;
}



/* ==========================================================
!COMMONS
========================================================== */



/* loading */

.loading{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #b880ff;
    z-index: 9999999999999999999999999999999999999999999999;
}

.l-logo{
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
}

.sC-l-logo{
    width: 40px !important;
    height: 50px !important;
    overflow: visible !important;
}


#splash_text{
    display: none !important;
}

.sk-chase {
    width: 40px;
    height: 40px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
    100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4); 
    } 100%, 0% {
        transform: scale(1.0); 
    } 
}


#w{
    position: relative;
    background: #e3e5f3;
    overflow: hidden;
}


#side{
    width:70%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
}


video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.s-center{
    width: 260px;
    height: 280px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 999;
}

.s-black{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    z-index: 5;
    opacity: 0.5;
    opacity: 0;
    transition: 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.s-black-on{
    opacity: .5;
}

.s-center-on{
    opacity: 1;
}

.s-center .txt {
    top: 0px;
    padding-bottom: 20px;
}

.s-center .head-load{
    position: relative;
    top: 0;
}

.s-center .head-load img{
    filter: blur(0);
    opacity: 1;
}

.qr-under .small{
    text-align: center;
    color: #fff;
    padding-bottom: 5px;
}

.qr{
    width: 208px;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 20px;
}

.qr-under .head-load img{
    transform: translate(0,5px) !important;
}

.qr-txt{
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    color: #fff;
    padding-bottom: 40px;
    letter-spacing: 0.1em;
}


#main{
    width: 30%;
    max-width: 358px;
    min-width: 358px;
    margin: auto;
    background-size: 200px;
    /* background-attachment: fixed; */
    position: relative;
    z-index: 9999;
}


.fix{
    width: 70px;
    height: 72px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 99999999999999;
    transform: translate(144px,0px);
}

.logo{
    width: 136px;
    height: 25px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 99999999999999;
    transform: translate(-90px,10px);
}



#splash_text{
    display: none !important;
}


.sk-chase {
    width: 40px;
    height: 40px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
    100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4); 
    } 100%, 0% {
        transform: scale(1.0); 
    } 
}



.is-ac{
    transform: translate(0px,0px) translateY(0em) !important;
    opacity: 1 !important;
}



/* FV */



/* CONTENTS */


.c1{
    position: relative;
    margin-top: -88px;
}


.btn-center1{
    width: 73%;
    left: 0;
    right: 0;
    margin: auto;
}




.c2{
    background: url(../img/1x/c2-back.webp) no-repeat;
    background-size: cover;
    background-position: top center;
}

.c2-head{
    width: 70%;
    margin: auto;
    padding-top: 35px;
    padding-bottom: 20px;
}


.c2-txt{
    width: 90%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 50px;
}

.c2-slide{
    width: 100%;
    position: relative;
    overflow: hidden;
}

.c2-slide .slide-items-1 li {
    margin: auto 20px;
}


.c3{
    background: url(../img/1x/c3-back.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}

.c3-head{
    width: 40%;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.c3-txt{
    width: 90%;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.c3-slide{
    width: 100%;
    position: relative;
}

.c3-s1-txt{
    width: 225px;
    margin: auto;
    padding-bottom: 20px;
}

.c3-s1-en{
    width: 64px;
    position: absolute;
    left: 0;
    top: 75px;
}

.c3-s1{
    width: 78%;
    margin-left: auto;
    position: relative;
    padding-right: 2.5%;
    padding-bottom: 20px;
}

.c3-s2{
    width: 78%;
    margin-left: auto;
    position: relative;
    padding-right: 2.5%;
    padding-bottom: 20px;
}

.slick-slide{
    margin-right: 15px;
}

.slick-dots{
    text-align: right !important;
    padding-right: 10px !important;
}

.slick-dots li{
    width: 10px !important;
    height: 10px !important;
    overflow: hidden;
    margin: 0 3px !important;
}

.slick-dots li button{
    width: 10px !important;
    height: 10px !important;
    border-radius: 100px;
}

.slick-dots li.slick-active button{
    background: #b880ff !important;
}

.c3-s1 .slick-dots li button{
    background: #ccc7ff !important;
}

.c3-s1 .slick-dots li.slick-active button{
    background: #b880ff !important;
}

.c3-s2 .slick-dots li button{
    background: #cce0e0 !important;
}

.c3-s2 .slick-dots li.slick-active button{
    background: #6eccae !important;
}

.slick-dots li button:before{
    opacity: 0 !important;
}

.c3-s2-txt{
    width: 308px;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 10px;
}

.c3-s2-en{
    width: 64px;
    position: absolute;
    left: 0;
    top: 75px;
}

.c3-s3-txt{
    width: 243px;
    margin: auto;
    padding-bottom: 20px;
}

.c3-s3-en{
    width: 64px;
    position: absolute;
    left: 0;
    top: 95px;
}

.c4{
    background: url(../img/1x/c4-back.webp) no-repeat;
    background-size: cover;
    background-position: top center;
}

.c4-head{
    width: 325px;
    margin: auto;
    padding-top: 35px;
    padding-bottom: 60px;
}

.c4-yt1-img{
    width: 85%;
    margin: auto;
}

.c4-yt1-txt{
    width: 325px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}

.c4-yt-area{
    position: relative;
    width: 90%;
    margin: auto;
    padding-bottom: 50px;
}

.c4-pb{
    padding-bottom: 50px;
}

.c4-yt-area iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
}

.c4-yt2-img{
    width: 85%;
    margin: auto;
}

.c4-yt2-txt{
    width: 325px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}

/* CV AREA */

.cv{
    background: #000;
    padding: 20px 0;
}

.cv-logo{
    width: 136px;
    margin: auto;
}

.cv-btn{
    width: 300px;
    margin: auto;
    position: relative;
}

.c5{
    background: #fff;
    position: relative;
}


.c5-txt{
    width: 325px;
    margin: auto;
    padding-bottom: 40px;
}

.c5-slide{
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.c6{
    background: #fff;
}

.c5-yt-area{
    position: relative;
    width: 86.5%;
    margin: auto;
}

.c6-fin{
    width: 85%;
    margin: auto;
    padding: 20px 0px;
}

.c7{
    background: #6eccae;
}


.c8{
    background: #fff;
    position: relative;
}

.sns-list {
    background: #b880ff;
}


.sns-list ul{
    width: 80%;
    margin: auto;
    padding-bottom: 50px;
}

.sns-list ul li{
    width: 50px;
    position: relative;
}

.f-list ul{
    justify-content: flex-start;
}

.foot{
    background: #000;
    padding-bottom: 50px;
    margin-top: -2px;
}

.foot-logo{
    width: 50px;
    position: absolute;
    right: 30px;
    bottom: 20px;
}

.foot-copy{
    width: 110px;
    position: absolute;
    left: 30px;
    bottom: 20px;
}

.f-list{
    width: 85%;
    margin: auto;
    position: relative;
    padding-bottom: 20px;
    padding-top: 30px;
}

.f-list ul{
    padding-bottom: 15px;
}

.f-list ul li{
    width: 50%;
    font-size: 14px;
    font-weight: bold;
    padding-right: 20px;
    color: #fff;
    position: relative;
}

.f-list ul li span{
    position: relative;
}

.cv-btn{
    position: relative;
    width: 300px;
    height: 106px;
}

.fv-btn{
    width: 300px;
    height: 106px;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
}

.fv-btn img{
    width: 300px;
    height: 106px;
    position: relative;
    margin: auto;
    animation: bound-anim 1s infinite;
}

.cv-btn img{
    width: 300px;
    height: 106px;
    position: relative;
    margin: auto;
    animation: bound-anim 1s infinite;
}


@keyframes bound-anim {
    0%,100% {top: 0;}
    30% {top: -30%;}
    90% {top: 0;}
}

.wall{
    width: 90%;
    height: 85%;
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #000;
    z-index: 1000;
    border-radius: 10px;
    overflow: hidden;
}


.wall-slider .slick-list{
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.5) !important;
}



/* ==========================================================
!SP media queries css
========================================================== */

@media screen and (max-width:768px) {
    
    .c1 {
        margin-top: -102px;
    }
    
    .logo {
        width: 166px;
        left: 20px;
        right: auto;
        top: 25px;
        transform: translate(0px,0px);
    }
    
    .fix{
        width: 90px;
        height: 92px;
        transform: translate(0,0);
        left: auto;
    }
    
    #side{
        display: none;
    }
    
    #main{
        width: 100%;
        max-width: none;
        min-width: auto;
    }
    
    .out-loading{
        height: 85vh;
    }
    
    .load-logo{
        top: 0;
        zoom: 0.6;
    }
    
    .step2-on {
        transform: scale(1) translate(0,-100px);
        opacity: 0;
    }
    
    .pc-slide{
        display: none;
    }
    
    .modal > .in iframe {
        width: 100%;
    }
    
    .m-close {
        top: 25%;
    }
    
    /* FV */
    
    .head-load{
        /* width: 280px; */
    }
    
    .load-logo{
        top: 0;
        bottom: 0;
    }
    
    /* CONTENTS */
    
    .visual{
        height: 615px;
    }
    
    .fv-read{
        top: 67px;
    }
    
    .fv-read h2{
        font-size: 44px;
    }
    
    .v-txt .in h2{
        font-size: 13px;
    }
    
    
    
    /* slider 調整 */
    
    .f-silde > .wrap {
        height: 62vw;
    }
    
    .f-silde .wrap .slideshow .content {
        width: 42vw;
        height: 63vw;
    }
    
    
    /* OPACITY */
    
    .sp-opa{
        opacity: 0 !important;
    }
    
    /* menu */
    
    .board{
        width: 100%;
    }
    
    /* recruit btn */
    
    .rec-navi{
        width: 100%;
    }
    
    .wall-slider{
        display: none !important;
    }
    
    body{
        background: #000;
    }
    
    
}/* end */


/* ==========================================================
!SP media queries css
========================================================== */

@media screen and (max-width:390px) {
    
    .m-close {
        top: 24%;
    }
    
}/* end */