﻿.l-cont-wrap {
    width: 100%;
}
.l-cont-wrap_inner {
    backface-visibility: hidden;
}
.l-first {
    position: relative;
    height: 100vh;
    background:var(--mainColor);
}
.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(75.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-project.l-first_pic{margin-top:0}
.l-first_catch {
    padding: calc(26.25 * var(--heightPixel,1vh)) calc(14.125 * var(--heightPixel,1vh)) 0 0;
    letter-spacing: 0em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.l-tit {
    font-size: calc(.06 * var(--heightPixel,1vh) * 100);
    position:relative;
}
.l-first_catch-row {
    display: block;
    text-align: left;
    line-height: 1;
    writing-mode: vertical-rl;
    letter-spacing: 7px;
}
.l-first_catch-box {
    padding-top: 20vh;
}
.l-first_catch-en {
    writing-mode: vertical-rl;
    font-size: calc(.015 * var(--heightPixel,1vh) * 100);
}

.l-paragraph {
    padding: calc(13.875 * var(--heightPixel,1vh)) 25% 0;
    position: relative;
    background-color: var(--mainColor);
}

.l-paragraph_inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding-top: calc(12.5 * var(--heightPixel,1vh));
    justify-content: space-between
}
.l-paragraph_left--w1 {
    max-width: calc(72.5 * var(--heightPixel,1vh));
    align-self: flex-end;
}
.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_left .c-font-en {
    font-size: calc(.0125 * var(--heightPixel,1vh) * 100);
    margin-top: 2vh;
}
.l-paragraph_right {
    position: relative;
    right: calc(1.875 * var(--heightPixel,1vh));
    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-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-tit-seal {
    position: absolute;
    right: 3%;
    top: 73%;
    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-project{position:relative;margin-top:10vh}
.l-project_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10vh;
}
.l-project_inner:last-child{margin-bottom:0}
.l-project_block {
    width: 47%;
    margin-bottom: 5vh;
}
.l-project_block img {
    width: 100%;
}
.l-project_fc {
    width: 100%;
}
.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: -5vh;
    bottom: -3vh;
    white-space: nowrap;
    font-family: '680-CAI978';
    color: #e83428;
}
.js-scrollaction-image, .l-project_block p {
    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-hollow{position:relative}
.l-paragraph-hollow .l-paragraph-hollow-inner{
    color: #fff;
    writing-mode: vertical-rl;
    position: absolute;
    bottom: 10vh;
    right: 7%;
    font-size: calc(2.25 * var(--heightPixel,1vh));
}
.l-paragraph-hollow .l-paragraph_right{
    color: #fff;
    position: absolute;
    bottom: 10vh;
    right: 5%;
}
.l-paragraph-hollow .js-textrowmotion-group--vertical .js-textrowmotion-end{
    text-align: right;
    margin-right: 5vh;
}
.l-paragraph_right .dtl {
    margin-top: calc(11.375 * var(--heightPixel,1vh));
    margin-right: 35px;
}
.l-paragraph_right p {
    font-size: calc(.0235 * var(--heightPixel,1vh) * 100);
    writing-mode: vertical-rl;
    font-feature-settings: "vchw" 1;
    line-height: 2.125;
    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-list-contents {
    background-color: var(--mainColor);
    position: relative;
    margin: 0 0 0 -1px;
}
.l-list-contents_inner {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    padding: calc(3.75 * var(--heightPixel,1vh)) calc(3.125 * var(--heightPixel,1vh)) calc(15.75 * var(--heightPixel,1vh));
}
.l-list-contents_block {
    position: relative;
    padding: calc(3.625 * var(--heightPixel,1vh)) calc(4 * var(--heightPixel,1vh)) 0;
    width:25%;
}
.l-list-contents_block-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.l-list-contents_block-lead {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.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-left: calc(4.5 * var(--heightPixel,1vh));
    font-size: calc(.0475 * var(--heightPixel,1vh) * 100);
    writing-mode: vertical-rl;
    position: relative;
}
.l-list-contents_block-ttl .write-en.write-en-ro {
    writing-mode: horizontal-tb;
    font-size: calc(2.5 * var(--heightPixel,1vh));
    margin: -1vh -3.5vh 0 0;
    transform: rotate(-22deg);
    text-align: right;
    position: absolute;
    right: 0;
    top: 100%;
    white-space: nowrap;
    font-family: '680-CAI978';
    color: #e83428;
    font-weight: normal;
}
.l-list-contents_block-cont {
    width: calc(25vw - 10.15vh);
}
.l-list-contents_block-cont-inner {
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    margin-top: 3vh;
}
.l-list-contents_block-cont-inner p{
    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-list-contents_block-img img{width:100%}

.l-map {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6vh;
}
.map{position:relative;line-height:0;transform:scale(.9);transform-origin: left top;}
.map_image{position:relative;z-index:2;pointer-events:none;}
.map_inner{position:absolute;height:100%;width:100%;top:0;left:0}
.map_inner path{cursor:pointer;fill:rgba(255, 222, 169,0);transition:all .3s}
.map_inner path:hover,.map_inner path.active{fill:rgba(255, 222, 169,1)}
.l-guide{text-align:center}
.l-guide-item {
    color: #adadad;
    margin-bottom: 2vh;
    cursor:pointer;
}
.l-guide-item:hover,.l-guide-item.active{color:#000;font-weight:bold}
.l-guide-tlt{margin-bottom:3vh;font-size:24px}
.l-map-show {
    position: absolute;
    top: 8%;
    z-index: 10;
    width: 72%;
    left: 9%;
    background: #fff;
    opacity: 0;
    transform: translateY(130%);
    transition: opacity 1s cubic-bezier(0.6, 0.25, 0, 1),transform .8s cubic-bezier(0.6, 0.25, 0, 1);
}
.l-map-show-con{line-height:1;padding:45px 65px;display:flex;justify-content:space-between;height:21vh}
.l-map-show-tlt {
    font-size: 30px;
    margin-bottom: 1.5vh;
    font-family: GenWanMinJP-SemiBold-5;
    font-weight: bold;
}
.l-map-show-desc{font-size:15px;width:60%;line-height:1.5}
.l-map-inner{position:relative}
.l-map-inner.active .l-map-show{
    opacity:1;transform:translateY(0)
}
.l-map-inner.active .map{filter:blur(7px)}
.swiper-pagination-fraction {
    width: auto;
    left: 50px;
    bottom: auto;
    top: 90px;
    color: #e83428;
    display: flex;
    align-items: center;
}
.swiper-pagination-fraction .swiper-pagination-current{margin:0 15px}
.swiper-pagination-left, .swiper-pagination-right {
    vertical-align: middle;
    width: 25px;
    height: 1px;
    background: #e83428;
    position:relative;
}
.swiper-pagination-left::before, .swiper-pagination-right::after{
        content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid;
    position: absolute;
    bottom: -6px;
    right: -6px;
    display: block;
}
.swiper-pagination-left::before{right:auto;left:-6px}

.l-paragraph-journey {
    background: url(../Images/tour/DSC_5231.jpg)no-repeat center;
    background-size: cover;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}
.l-paragraph_center {
    width: calc(62.5 * var(--widthPixel,1vw));
    background: rgba(255,255,255,.9);
    text-align: center;
    padding: 9vh 0;
}
.l-journey-logo{width:140px;}
.l-paragraph_center-txt{font-family:none;margin-top:3vh}
.l-journey-code{width:100px;margin-top:3vh}
.fadeIn {
    position: absolute;
    bottom: 114vh;
    width: 0;
    overflow: hidden;
    transition: width 3s cubic-bezier(0.6, 0.25, 0, 1) 0.8s;
}
.fadeIn img{width:60vh}
.js-scrollaction-active .fadeIn{width:60vh}
.l-list-contents_block-ttl .js-textrowmotion-group--vertical.js-textrowmotion-group--block .js-textrowmotion:not(:first-child){margin-right:-2vh}
.l-paragraph--h1 {
    padding-bottom: calc(13 * var(--heightPixel,1vh));
}
.map-inner-btn {
    display: none;
    background: #000;
    color: #fff;
    border: 0;
    padding: 3vw 11vw;
    margin: 4vh auto 9vh;
}
.sp-map {
    position: fixed;
    width: 100%;
    height: calc(100% - 7vh);
    top: 7vh;
    left: -100%;
}
.me-flex{margin-top:10vh;justify-content:space-around}

