@charset "UTF-8";

/*==================================================================================================

       aos にじみ

===================================================================================================*/

        .nijimi { opacity:0; filter: blur(10px); transition: 1s ease-in-out; }
        .nijimi.active { opacity:1; filter: blur(0); }

        .aos-nijimi { filter: blur(10px); transition: 1s ease-in-out; }
        .aos-nijimi.active { filter: blur(0); }

/*==================================================================================================

       テキストアニメーション

===================================================================================================*/

.animation-text {
    display: flex;
    overflow: hidden;
    }
    .animation-text span {
    margin: 0;
    transform: translateY(2em);
    
    }
    .animation-text.active span {
    animation: textanimation 1s forwards;
    
    }
    .animation-text span:nth-child(1) { animation-delay: 0.1s}
    .animation-text span:nth-child(2) { animation-delay: 0.2s}
    .animation-text span:nth-child(3) { animation-delay: 0.3s}
    .animation-text span:nth-child(4) { animation-delay: 0.4s}
    .animation-text span:nth-child(5) { animation-delay: 0.5s}
    .animation-text span:nth-child(6) { animation-delay: 0.6s}
    .animation-text span:nth-child(7) { animation-delay: 0.7s}
    .animation-text span:nth-child(8) { animation-delay: 0.8s}
    .animation-text span:nth-child(9) { animation-delay: 0.9s}
    .animation-text span:nth-child(10) { animation-delay: 1s}
    .animation-text span:nth-child(11) { animation-delay: 1.1s}
    .animation-text span:nth-child(12) { animation-delay: 1.2s }
    .animation-text span:nth-child(13) { animation-delay: 1.3s }
    .animation-text span:nth-child(14) { animation-delay: 1.4s }
    .animation-text span:nth-child(15) { animation-delay: 1.5s }
    .animation-text span:nth-child(16) { animation-delay: 1.6s }
    .animation-text span:nth-child(17) { animation-delay: 1.7s }
    .animation-text span:nth-child(18) { animation-delay: 1.8s }
    .animation-text span:nth-child(19) { animation-delay: 1.9s }
    .animation-text span:nth-child(20) { animation-delay: 2s }


    @keyframes textanimation {
    0% { transform: translateY(2em); filter: blur(20px); }
    100% { transform: translateY(0); filter: blur(0); }
    }

/*==================================================================================================

       hero

===================================================================================================*/

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 6;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:50%;
        background: #000;
        background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
        }

        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0px; }
        }

/*==================================================================================================

       Movie

===================================================================================================*/

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }

        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        /*=================================================
        すべてアスペクト比固定の場合（movieサイズのまま）　top-movie付与
        ==================================================*/

        .movie_inner {
        position: relative;
        width: 100%;
		height: auto;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }
		.top-movie{ max-height:100vh; }

        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0;
        padding-top:56.25%;
        }
        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:90%; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:90%; }
        }

        /*=================================================
                下層用
        ==================================================*/

        .movie.pages { z-index: 1; }
        
        .movie.pages .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        object-fit:contain;
        min-width: 0;
        min-height: 0;
        position: absolute;
        left: 50%;
        top:50%;
        translate:-50% -50%;
        }
        .movie.pages:before {
        content: "";
        display: block;
        padding-top: 56.25%;
        }

        @media screen and (max-width:1024px) {
        .movie.pages .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.pages .movie_inner video{ height:100% !important; object-fit: cover; }
        }

/*==================================================================================================

       背景

===================================================================================================*/

.border-box {
        border:4px solid rgb(0 0 0 / .3);
        padding:6%;
        box-sizing: border-box;
        }
        .border-box-m {
        border:6px solid #C6BBA8;
        border-radius: 10px;
        padding:8%;
        box-sizing: border-box;
        background: rgb(255 255 255 / .5);
        }
        .border-box-s {
        border:4px solid rgb(255 255 255 / .4);
        padding:4%;
        box-sizing: border-box;
        }

.after-red {
        position: relative;
        z-index: 0;
        }
        .after-red:after {
        content:"";
        display: block;
        position: absolute;
        top:80px;
        left:0;
        width:100%;
        height:calc(100% - 80px);
        background: url("../images/parts/red.jpg") left top repeat;
        z-index: -1;
        }

.cloud-wrap {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .cloud-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:-20%;
        translate:0 -50%;
        width:1800px;
        height:1300px;
        background: url("../images/parts/cloud.jpg") center center / cover;
        z-index: -1;
        }

.bg-red {
        background: url("../images/parts/red.jpg") left top repeat;
        }

        @media screen and (max-width:1024px) {
        .border-box  {  }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:5%; }
        .after-red:after { top:50px; height:calc(100% - 50px); }
        .cloud-wrap:after { width:900px; height:650px; }
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:9.5%; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:9.5%; }
        .gray-box { padding:10%; }
        .cloud-wrap:after { width:450px; height:325px; }
        }

/*==================================================================================================

        タイトル / テキスト

===================================================================================================*/

.white { color:#F9F6F0 !important; }
.white .en { color:#F9F6F0; }
.red { color:#ff363d;}
.gold { color:#C2A66E; }
.blue { color:#0E3653; }


.mark {background:linear-gradient(transparent 90%, #a95549 60%);}

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(255 255 255 / .6);
        }
        .under-line {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(255 255 255 / .5);
        }
.bar-title {
        position: relative;
        padding-top:18px;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:46px;
        height:2px;
        background:#B69B5C;
        }
        .center.bar-title:after {
        left:50%;
        translate:-50%;
        }
        .bg-banner .bar-title:after { background: #FFF; }
        @media screen and (max-width:1024px) {
        .bar-title { padding-top:15px; }
        }
        @media screen and (max-width:767px) {
        .bar-title { padding-top:10px; }
        .bar-title.bar-sp-center:after { left:50%; translate:-50%; }
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:1px;
        background: #2A9FB1;
        margin-left:1rem;
        z-index: -1;
        }


        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        
        }



/*==================================================================================================

       トップページ

===================================================================================================*/

        /*=================================================
                GREETING
        ==================================================*/

        .greeting-img {
        width:110%;
        height:100vh;
        min-height:750px;
        background: url("../images/img/top/img_01.jpg") right top / cover;
        }
        .greeting-wrap {
        position: relative;
        background: url("../images/parts/bg01.jpg") center center / cover;
        z-index: 0;
        }
        .greeting-wrap:before,.greeting-wrap:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:150px;
        background: #000;
        background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: -1;
        }
        .greeting-wrap:before { top:0; }
        .greeting-wrap:after { bottom:0; rotate:180deg;}
        .introduction-text {
        width:72%;
        max-width:450px;
        margin-inline:auto;
        padding:3rem 0;
        }
        .intro-01 {
        position: relative;
        padding:6% 60% 9% 6%;
        box-sizing: border-box;
        }
        .intro-02 {
        position: absolute;
        bottom:0;
        left:55%;
        width:23%;
        }
        @media screen and (max-width:1350px) {
        .greeting-img { max-height:900px; }
        }
        @media screen and (max-width:1024px) {
        .greeting-img { width:150%; }
        }
        @media screen and (max-width:767px) {
            .greeting-text {
            position: relative;
            padding:9rem 2rem;
            box-sizing: border-box;
            }
            .greeting-text:after {
            content:"";
            display: block;
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background: url("../images/img/top/img_01.jpg") center top / cover;
            opacity: .6;
            z-index: -1;
            }
        .introduction-text { width:85%; }
        .intro-01 { padding:0 44% 15% 6%; }
        .intro-02 { left:67%; width:27%; }
        }

        /*=================================================
                ATT
        ==================================================*/

        .att-img {
        width:100%;
        height:0;
        padding-bottom:66%;
        }
        .att01 { background: url("../images/img/top/img_03-1.jpg") center center / cover; }
        .att02 { background: url("../images/img/top/img_04-1.jpg") center center / cover; }
        .att03 { background: url("../images/img/top/img_05-1.jpg") center center / cover; }

        .att-text {
        width:72%;
        max-width:300px;
        margin-inline:auto;
        padding-top:120px;
        }
        .att-lead p{
        width:70px;
        opacity:.5;
        letter-spacing: 0;
        line-height: 200%;
        }
        .lead-h8em  { height:8em;}
        .lead-h9em  { height:9em;}
        .lead-h18em { height:18em;}

        .att-sub-text {
        width:85%;
        max-width:600px;
        margin-inline:auto;
        padding:6% 0;
        }

        .att-01 {
        position: relative;
        padding:0 43% 9% 18%;
        box-sizing: border-box;
        }
        .att-02 {
        position: absolute;
        bottom:0;
        left:69%;
        width:20%;
        }
        .att-03 {
        position: relative;
        padding:6% 52% 0 10%;
        box-sizing: border-box;
        }
        .att-04 {
        position: absolute;
        top:0;
        left:63%;
        width:24%;
        }
        .att-05 {
        position: relative;
        padding:0 42% 9% 17%;
        box-sizing: border-box;
        }
        .att-06 {
        position: absolute;
        bottom:0;
        left:73%;
        width:27%;
        }

        @media screen and (max-width:1500px) {
        .att-img { padding-bottom:70%; }
        }
        @media screen and (max-width:1350px) {
        .att-img { padding-bottom:600px; }
        }
        @media screen and (max-width:1024px) {
        .att-text { padding-top:70px; }
        .att-img { padding-bottom:490px; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:62%; }
        .att-text { padding:3rem 0 0; width:85%; max-width:600px }
        .att-sub-text { padding:0 0 3rem; }
        .att-01 { padding:0 48% 9% 5%; }
        .att-02 { left:64%; width:26%; }
        .att-05 { padding:0 48% 9% 5%; }
        .att-06 { left:64%; width:30%; }
        }

        /*=================================================
                INSTAGRAM
        ==================================================*/

        .instagram-img01 {
        width:100%;
        height:0;
        padding-bottom:40%;
        background: url("../images/parts/instagram_01.jpg") center center / cover;
        }
        .instagram-img02 {
        width:100%;
        height:100%;
        background: url("../images/parts/instagram_02.jpg") center center / cover;
        }
        .instagram-wrap {
        position: relative;
        width:100%;
        height:100%;
        line-height: 1;
        background: #333333;
        color:#FFF;
        }
        .instagram-wrap p {
        position: absolute;
        width:100%;
        top:50%;
        left:0;
        translate:0 -50%;
        text-align: center;
        }
        .instagram-banner a {
        display: block;
        }
        .instagram-banner a:hover {}

        @media screen and (max-width:1024px) {
        .instagram-img01 { padding-bottom:60%; }
        }
        @media screen and (max-width:767px) {
        .instagram-img01 { padding-bottom:30%; }
        .instagram-wrap { height:0; padding-bottom:30%; } 
        }
        
        /*=================================================
                Banner
        ==================================================*/

        .banner-wrap {
        width:100%;
        position: relative;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-wrap a {
        position: relative;
        display: block;
        z-index: 0;
        }
        .banner-wrap a:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgb(0 0 0 / .1);
        z-index:0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        width:100%;
        height:750px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-text {
        position: absolute;
        left:5%;
        top:50%;
        translate:0 -50%;
        width:95%;
        height:auto;
        text-align: left;
        box-sizing: border-box;
        z-index: 1;
        }
        .more-reservation {
        position:relative;
        width:100%;
        height:auto;
        line-height:1;
        text-align: left;
        font-weight:400;
        font-size:24px;
        padding-right:1.5em;
        color:#FFF;
        box-sizing: border-box;
        z-index: 1;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .more-reservation:after {
        content:"";
        display: inline-block;
        position: absolute;
        top:50%;
        margin-left:.75em;
        width:110px;
        height:1px;
        background:var(--font-color);
        z-index: 0;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        }
        
        .banner-wrap a:hover .more-reservation { opacity:1;  }
        .banner-wrap a:hover .more-reservation:after { width:10px; }
        .banner-wrap a:hover:after { background: rgb(0 0 0 / .6); }

        @media screen and (max-width:1600px) {
        .banner-img { height:650px; }
        }
        @media screen and (max-width:1350px) {
        .banner-img { height:550px; }
        .more-reservation { font-size:22px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:450px; }
        .more-reservation { font-size:21px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:400px; }
        .more-reservation { font-size:18px; }
        .more-reservation:after { width:70px; }
        .banner-text { left:10%; }
        .banner-wrap a:after { background: rgb(0 0 0 / .4); }
        }

/*==================================================================================================

       下層 ヘッダー

===================================================================================================*/

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }

        /*=================================================
                ノーマルヘッダー
        ==================================================*/

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:100vh;
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:45%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .stay         { background: url("../images/img/stay/header.jpg") center center / cover; }
        .plan         { background: url("../images/img/plan/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .tenant       { background: url("../images/img/tenant/header.jpg") center center / cover; }
        .contact      { background: url("../images/img/contact/header.jpg") center center / cover; }


        @media screen and (max-width: 1024px) {
        .page-header:before { padding-bottom:80%; height:0; }
        .page-header.short:before { padding-bottom:80%; height:0; }
        }
        @media screen and (max-width:767px) {
        .page-header:before { padding-bottom:80%; height:0; }
        .page-header.short:before { padding-bottom:80%; height:0; }
        }

.page-title {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:1.5rem 3vw 1.5rem 3vw;
        box-sizing: border-box;
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
        text-align: left;
        color:#FFF;
        z-index:1;
        }
        .page-title h1 {
        position: relative;
        display: inline-block;
        padding:0 3.5em 0 0;
        letter-spacing: .05em;
        color:#FFF;
        }
        .page-title h1:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.75em;
        right:0;
        width:3em;
        height:1px;
        background:rgb(255 255 255 / .6);
        }

        @media screen and (max-width:1024px) {
        .page-title { padding:1.25rem 4.5vw; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:.925rem 6.5vw;  }
        }

/*==================================================================================================

       STAY

===================================================================================================*/

        .stay-img-01 {
        padding-right:12%;
        box-sizing: border-box;
        }
        .stay-img-02 {
        padding-right:45%;
        box-sizing: border-box;
        }
        .stay-img-03 {
        padding-left:25%;
        box-sizing: border-box;
        }
        .stay-text-01 {
        margin-left: auto;
        width: 100%;
        max-width: 560px;
        }
        .stay-text-02 {
        margin-left: auto;
        width: 100%;
        max-width: 500px;
        }

        .terrace-text-01 {
        padding:100px 0 0;
        width:72%;
        min-width:370px;
        margin-inline:auto;
        }
        .terrace-text-02 {
        padding:10% 0 10% 18%;
        box-sizing: border-box;
        }
        .terrace-01 {
        position: relative;
        margin-top:-15%;
        padding: 0 0 0 50%;
        box-sizing: border-box;
        }
        .terrace-02 {
        position: relative;
        padding:3% 52% 4% 15%;
        box-sizing: border-box;
        }
        .terrace-03 {
        position: absolute;
        left:60%;
        bottom:0;
        width:22%;
        }
        .bath-text-01 {
        width:72%;
        min-width:370px;
        margin-inline:auto;
        }
        .bath-text-02 {
        padding:10% 18% 10% 0;
        box-sizing: border-box;
        }
        .bath-01 {
        position: relative;
        padding:0 45% 0 0;
        box-sizing:border-box;
        margin-top:-12%;
        }
        
        @media screen and (max-width:1350px) {
        .terrace-text-01 { min-width:320px; padding-top:50px; }
        .terrace-01 { margin-top:-5%; }
        .bath-text-01 { min-width:350px; }
        .bath-01 { margin-top:-5%; padding:0 35% 0 0; }
        }
        @media screen and (max-width:1024px) {
        .stay-img-02 { padding-right:25%;  }
        .terrace-text-01 { min-width: 265px; }
        .terrace-text-02 { padding:10% 0 10% 0;}
        .terrace-01 { margin-top:3rem; padding: 0 0 0 27%; }
        .bath-text-01 { min-width:0; }
        .bath-text-02 { padding:3rem 0; }
        .bath-01 { margin-top:3rem; }
        }
        @media screen and (max-width:767px) {
        .stay-img-01 { padding:0 0 3rem 15%; }
        .stay-img-02 { padding:0 25% 3rem 0; }
        .stay-img-03 { padding:0 10% 3rem 25%; }
        .stay-text-02 { max-width: 17em; }
        .terrace-text-01 { min-width:0; width:80%; padding-top:3rem; }
        .terrace-text-02 { padding:3rem 0;}
        .terrace-02 { padding:0 52% 11% 0; }
        .terrace-03 { left:62%; width:38%; }
        .bath-text-01 { padding-top:3rem; width:85%; }
        .bath-text-02 { padding:3rem 0 0; }
        .bath-01 { padding:0 5% 0 30%; }
        .bath-02 { padding-bottom:3rem; }
        }

/*==================================================================================================

       PLAN

===================================================================================================*/

        .outer-left {
        padding-left:60px;
        box-sizing: border-box;
        }
        .outer-right {
        padding-right:60px;
        box-sizing: border-box;
        }
        .left-inner {
        position: relative;
        width:100%;
        max-width:calc(50vw + 700px);
        margin:0 0 0 auto;
        }
        .swiper {
        width: 100%;
        height: auto;
        padding-bottom:45px !important;
        }
        .swiper-slide {
        height:auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right:40px !important;
        }
        .slide-swipe .swiper-slide {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        }
        .swiper-section {
        width:750px;
        box-sizing: border-box;
        }
        .swiper-text-wrap h4 { font-weight:500; }
        
        .slide-swipe .swiper-button-prev,
        .slide-swipe .swiper-button-next { top: auto; height: 30px; width: 30px; margin-top:0; }
        .slide-swipe .swiper-button-prev::after,
        .slide-swipe .swiper-button-next::after { content: ""; height: 30px; margin: auto; width: 30px; }
        .slide-swipe .swiper-button-prev::after { background: url("swiper/prev-w.svg") center center / cover; }
        .slide-swipe .swiper-button-next::after { background: url("swiper/next-w.svg") center center / cover; }
        .slide-swipe .swiper-slide img { height: auto; width: 100%; }
        
        .slide-swipe .swiper-button-next { left:45px; bottom:0; }
        .slide-swipe .swiper-button-prev { left:0; bottom:0; }

        @media screen and (max-width: 2000px) {
        .outer-left		{ padding-left:4.5vw; }
        .outer-right { padding-right:4.5vw; }
        }
        @media screen and (max-width:1350px) {
        .swiper-section { width: 600px; }
        }
        @media screen and (max-width:1024px) {
        .swiper-section { width: 450px; }
        }
        @media screen and (max-width:767px) {
        .outer-left { padding-left:7.5vw; }
        .outer-right { padding-right:7.5vw; }
        .swiper-section { width: 300px; }
        .slide-swipe .swiper { padding-left:0px; margin-left:0px; }
        .slide-swipe .swiper:after { display: none; }
        .swiper-slide { margin-right:20px !important; }
        }


/*==================================================================================================

       ACCESS

===================================================================================================*/

        .access-img {
        padding-right:20%;
        box-sizing: border-box;
        }

        .access-box {
        box-sizing: border-box;
        overflow: hidden;
        
        }
        .access-root {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:center;
        align-items: center;
        align-content:stretch;
        -webkit-flex-direction: row;
        -webkit-flex-wrap: nowrap;
        }
        .access-root li {
        flex: none;
        display: block;
        font-feature-settings:normal;
        position: relative;
        text-align: center;
        padding:2.5rem 1.25rem;
        box-sizing: border-box;
        border:1px solid rgba(255 255 255 / 1);
        font-size:18px;
        width:33%;
        height:auto;
        line-height: 100%;
        }
        .access-root li.road {
        background: none;
        padding:0rem;
        font-size:16px;
        border:none;
        }
        .access-root li.road span {
        position: relative;
        display: block;
        padding-bottom:1.5em;
        }
        .access-root li.road:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:0;
        width:100%;
        height:1px;
        border-bottom:3px dotted rgb(255 255 255 /.8);
        }
        .access-root li:first-child { background: #000;}
        .access-root li:last-child { background:#8f7a4e; border:none; }
        .access-root li:last-child:after { display: none; }

        .access-root .tategaki-nomber { vertical-align: text-bottom; }

        @media screen and (max-width:1024px) {
        .access-root li { padding:1.5rem .5rem; }
        }
        @media screen and (max-width:767px) {
        .access-box { border:1px solid rgb(255 255 255 / .6); padding:18px; background:rgb(255 255 255 / .1); }
        .access-root { display: block; }
        .access-root li { height:auto; text-align:center; padding:1.25rem .5rem;  margin-bottom:1rem; width:100%; font-size:15px; }
        .access-root li.road { padding:.5rem .5rem;  }
        .access-root li:after { content:""; display: block; position: absolute; bottom:-1rem; left:50%; width:1px; height:1rem; background:#FFF; }
        .access-root li.road:after { top:auto; bottom:-1rem; left:50%; width:1px; height: 1rem;  border:none; background: #FFF; }
        .access-root li:last-child { margin-bottom: 0; }
        .access-root li.road span { padding-bottom:0; }
        
        }