.l-cont-wrap {
    width: 100%;
}
.l-cont-wrap_inner {
    backface-visibility: hidden;
}
.l-first {
    position: relative;
    height: 100vh;
    background-color: var(--mainColor);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 30% bottom;
}
.l-first_textwrap {
    position: absolute;
    bottom: 0;
    right: 3vw;
    display: flex;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.l-first_textwrap-inner {
    display: flex;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    flex-direction: column-reverse;
}
.l-first_textwrap-inner .scroll-horizontal {
    background: rgba(222,222,222,.7);
    display: block;
    position: relative;
    width: 1px;
    height: 56px;
    overflow: hidden;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    transition: transform 1.6s cubic-bezier(0.39, 0.1, 0, 1);
}
.l-first_scrollto {
    font-size: calc(.01325 * var(--heightPixel,1vh) * 100);
    color: #000;
    transition: opacity 1.8s cubic-bezier(0.6, 0.25, 0, 1) 0.8s,transform 1.6s cubic-bezier(0.6, 0.25, 0, 1) 0.8s;
    writing-mode: vertical-rl;
    margin-bottom: 1vh;
}
.l-first_textwrap-inner .scroll-horizontal .scroll-horizontal-inner {
    width: 1px;
    height: 56px;
    animation: horizontal-move 6s cubic-bezier(1, 0.47, 0.29, 0.95) infinite;
    -webkit-transform: translateY(-36%);
    transform: translateY(-36%);
    -webkit-transform-origin: top;
    transform-origin: top;
}
.l-first_textwrap-inner .scroll-horizontal .scroll-horizontal-inner:before {
    content: "";
    display: block;
     width: 1px;
    height: 56px;
    background: #000000;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
    -webkit-transform-origin: top;
    transform-origin: top;
    animation: horizontal 6s cubic-bezier(1, 0.47, 0.29, 0.95) infinite;
}

.l-first_logo, .l-first_pic {
    width: calc(69.25 * var(--heightPixel,1vh));
    position: absolute !important;
    bottom: 0;
    left: 0;
    line-height: 0;
    z-index: 1;
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.6, 0.25, 0, 1) 0.8s,transform 1.6s cubic-bezier(0.6, 0.25, 0, 1) 0.8s;
}

.l-first_logo {
    display: none
}
.l-first_pic {
    top: 11vh;
    bottom: auto;
    width: 70%;
    height: 70vh;
    background-size: cover;
    background-position: center
}
.l-first_catch {
    padding: calc(26.25 * var(--heightPixel,1vh)) calc(20.125 * var(--heightPixel,1vh)) 0 0;
    letter-spacing: 0em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.l-tit {
    font-size: calc(.05 * var(--heightPixel,1vh) * 100);
    position:relative;
}
.l-tit-seal {
    position: absolute;
    right: 97.5%;
    top: 87%;
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.6, 0.25, 0, 1),transform 1.6s cubic-bezier(0.6, 0.25, 0, 1);
    transition-delay:.34s
}
.l-first_catch-row {
    display: block;
    margin-left: calc(2.2375 * var(--heightPixel,1vh));
    width: 1em;
    text-align: left;
    line-height: 1;
    writing-mode: vertical-rl;
    letter-spacing: 7px;
}
.l-first_catch-seal {
    width: calc(4.2375 * var(--heightPixel,1vh));
    position: absolute;
    right: 0.75em;
    bottom: 0;
}
.l-first_catch-en {
    writing-mode: vertical-rl;
    margin-top: calc(1.7625 * var(--heightPixel,1vh));
    font-size: calc(.015 * var(--heightPixel,1vh) * 100);
}
.l-sec-mv_cover {
    background-color: var(--mainColor);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    transition: height 1.4s 0.6s cubic-bezier(0.39, 0.1, 0, 1);
    margin: 0 0 0 -1px;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.l-paragraph {
    padding: calc(13.875 * var(--heightPixel,1vh)) 25% 4vh;
    position: relative;
    background-color: var(--mainColor);
    margin-left: -1px;
}
.l-paragraph_left-margin{margin-left:15vh;}
.l-paragraph--h1 {
    padding-bottom: calc(14 * var(--heightPixel,1vh));
}
.l-paragraph_inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-between;
}
.l-paragraph_left--w1 {
    max-width: calc(63.5 * var(--heightPixel,1vh));
    align-self: self-end;
}
.l-paragraph_left .intro {
    font-size: calc(.01375 * var(--heightPixel,1vh) * 100);
    line-height: 5.2727272727;
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.6, 0.25, 0, 1),transform 1.6s cubic-bezier(0.6, 0.25, 0, 1);
}
.l-paragraph_left p {
    font-size: calc(.0175 * var(--heightPixel,1vh) * 100);
    line-height: 1.75;
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.6, 0.25, 0, 1),transform 1.6s cubic-bezier(0.6, 0.25, 0, 1);
}
.l-paragraph_right {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    white-space: nowrap;
    font-size: calc(.06 * var(--heightPixel,1vh) * 100);
}
.l-paragraph_intro {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    white-space: nowrap;
}
.l-paragraph_right .intro {
    font-size: calc(.01375 * var(--heightPixel,1vh) * 100);
    margin-left: calc(2 * var(--heightPixel,1vh));
    line-height: 1;
    letter-spacing: 0em;
    writing-mode: vertical-rl;
    display: inline-block;
    transform: translateY(40px);
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.6, 0.25, 0, 1),transform 1.6s cubic-bezier(0.6, 0.25, 0, 1);
}
.l-paragraph_right .ttl {
    -webkit-flex: 1;
    flex: 1;
    writing-mode: vertical-rl;
    line-height: 1;
}
.l-paragraph_right .row {
    display: block;
    margin-left: calc(1.0875 * var(--heightPixel,1vh));
    width: 1em;
    letter-spacing: -5px;
}
.l-catch_inner {
    position: relative;
    align-self: flex-end;
    margin-left: 15vw;
}

.l-project_fc {
    width: 100%;
    margin:8vh 0
}

.l-list-contents {
    background-color: var(--mainColor);
    position: relative;
    margin: 0 0 0 -1px;
}
.l-list-contents_block {
    position: relative;
    width: 33%;
    padding: calc(3.625 * var(--heightPixel,1vh)) calc(5 * var(--heightPixel,1vh)) 0;
    margin-bottom:3vh
}
.l-list-contents_inner {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    padding: calc(3.75 * var(--heightPixel,1vh)) 0 calc(3.75 * var(--heightPixel,1vh)) calc(3.125 * var(--heightPixel,1vh));
}
.l-list-contents_block-inner {
    height: 100%;
    display: flex;
}
.l-list-contents_block-lead {
    display: flex;
    flex-wrap: wrap;
}
.l-music_block-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(10.125 * var(--heightPixel,1vh));
    height: 100%;
    padding: 0 0 0 calc(1 * var(--heightPixel,1vh));
    color: #747474;
    line-height: 1;
    writing-mode: vertical-lr;
}
.l-music_block-intro:first-child {
    border-left: 1px solid #DFDFDF;
}
.l-music_block-intro .num {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: calc(1 * var(--heightPixel,1vh));
    font-size: calc(.015 * var(--heightPixel,1vh) * 100);
}
.l-list-contents_block-ttl {
    margin-right: calc(4.5 * var(--heightPixel,1vh)); 
    font-size: calc(.0475 * var(--heightPixel,1vh) * 100);
    writing-mode: vertical-rl;
    position: relative;
    width:1em
}
.l-list-pic{width:100%}
.l-paragraph-ml{margin-left:15vh}
.c-ttl{display:none;color:#dfdfdf}
.l-list-contents .c-ttl .jp{position:absolute}
.l-project .write-en-ro {
    writing-mode: horizontal-tb;
    font-size: calc(5 * var(--heightPixel,1vh));
    transform: rotate(-15deg);
    text-align: right;
    position: absolute;
    right: -8vh;
    bottom: -2vh;
    white-space: nowrap;
    font-family: '680-CAI978';
    color: #e83428;
}
.salon-sp-end{display:none}
.touch-more{text-align:center;}

@media (max-width: 860px), (max-height: 480px) {
    .l-first {
        background-image: url(../Images/teasalon/water.png);
    }
}