/* ボタン */

.l-btn a {
    padding: 20px 4vw;
}

.yellow-btn a {
    padding-top: 20px;
    padding-bottom: 20px;
}

.lang-btn .en-btn a {
    background-color: var(--blue);
}

.lang-btn .tw-btn a,
.lang-btn .jp-btn a {
    border: 4px solid #fff;
}

/* ヘッダー */

header .sp-menu .sp-header_btn .en-btn a {
    background-color: #fff;
    color: var(--blue);
}

header .sp-menu .sp-header_btn .tw-btn a,
header .sp-menu .sp-header_btn .jp-btn a {
    border: 3px solid #fff;
    background-color: var(--blue);
}

header .sp-menu li:nth-child(1) a svg {
    width: 90px;
}

header .sp-menu li:nth-child(2) a svg {
    width: 163px;
}

header .sp-menu li:nth-child(3) a svg {
    width: 211px;
}

/* about */

.about .wrap .catch {
    letter-spacing: var(--lsp-80);
    max-width: 638px;
}

.about .wrap .desc {
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-20);
    max-width: 638px;
}

@media screen and (max-width:1500px) {

    .about  {
        padding-left: 10.5vw;
    }

    .about .wrap .catch {
        max-width: 585px;
    }

}

@media screen and (max-width:850px) {

    .about {
        padding-left: 6.5vw;
    }

}

/* nav */

.p-nav {
    background-image: url(../images/en-pc-nav_bg.jpg);
    padding: 3.6vw 0 5.3vw;
}

.p-nav ul li a {
    padding-left: 4vw;
    padding-right: 4vw;
}

.p-nav ul li:nth-child(1) a svg {
    width: 7.2vw;
}

.p-nav ul li:nth-child(2) a svg {
    width: 13.5vw
}

.p-nav ul li:nth-child(3) a svg {
    width: 17.5vw;
}

.p-nav ul li:nth-child(1) a::after,
.p-nav ul li:nth-child(2) a::after {

    height: 50px;

}

@media screen and (max-width:850px) {

    .p-nav {
        background-color: var(--blue);
        background-image: none;
        position: relative;
        z-index: 10;
        padding: 10.5vw 0 9vw;
    }

    .p-nav::after {
        content: "";
        display: block;
        width: 100%;
        height: 14vw;
        background-image: url(../images/en-pnav-bg_sp.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: 0;
        bottom: -11vw;
        z-index: -1;
    }

    .p-nav ul li:nth-child(1) a::after,
    .p-nav ul li:nth-child(2) a::after {
        top: 50%;
        transform: translateY(-50%);
        right: calc(-1.5vw + 2px);
    }

    .p-nav ul li:nth-child(1) a svg {
        width: 18.5vw;
    }
    .p-nav ul li:nth-child(2) a svg {
        width: 20vw;
        height: 9.6vw;
    }
    .p-nav ul li:nth-child(3) a svg {
        width: 31.4vw;
        height: 9.6vw;
    }

}

@media screen and (max-width:500px) {

    .p-nav ul li a {
        padding-right: 4.5vw;
    }

}

.t-section .title h2 {
    margin-bottom: 5px;
}

.t-section .title p {
    max-width: 1054px;
}


/* access */

.ac-wrap2 {
    height: 40vw;
    padding-top: 4.2vw;
}

.ac-wrap2 div h3 {
    letter-spacing: var(--lsp-50);
}

.ac-wrap2::before {
    bottom: -8.3vw;
    z-index: 100;
}

.access .title::after {
    right: 9.4vw;
}

.access-sub {
    background-position: 
    top 6vw right,
    top 17vw left 2.6vw,
    right 36.5vw bottom 30vw,
    right 9vw bottom 20vw,
    left 25vw bottom 16vw;
}

@media screen and (max-width:1800px) {

    .ac-wrap2 {
        height: 50vw;
        background-position: top left -11vw;
    }

}

@media screen and (max-width:1600px) {

    .access .title::after {
        right: 6.4vw;
        top: -3vw;
    }

}

@media screen and (max-width:1500px) {

    .ac-wrap2 {
        height: 49vw;
        background-position: top left -5vw;
        background-size: 60%;
        padding-top: 4.5vw;
    }

    .ac-wrap2 div {
        width: 31vw;
    }

}

@media screen and (max-width:1300px) {

    .access .title::after {
        top: -3vw;
    }

}

@media screen and (max-width:1200px) {

    .ac-wrap2 {
        height: 61vw;
    }

}

@media screen and (max-width:900px) {

    .ac-wrap2 {
        height: 69vw;
    }

}

@media screen and (max-width:850px) {

    .access {
        z-index: 10;
        padding-top: 20vw;
    }

    .access::before {
        top: 30vw;
    }

    .access .title h2 {
        margin-bottom: 30px;
    }

    .access .title::after {
        top: -26vw;
        right: 2.5vw;
    }

    .ac-wrap2 {
        height: 26vw;
        background-position: top 30vw left;
        background-size: 80%;
        padding-top: 10.5vw;
    }

    .ac-wrap2::before {
        z-index: -2;
    }

    .ac-wrap2 div {
        width: 82.5vw;
    }

    .ac-wrap2 div h3 {
        font-size: 3.2rem;
    }

}

@media screen and (max-width:600px) {

    .ac-wrap2 {
        background-position: top 30vw left;
        background-size: 78%;
    }

}

@media screen and (max-width:500px) {

    .ac-wrap2 div h3 {
        font-size: 2rem;
    }

    .access::before {
        top: 77vw;
    }

}

@media screen and (max-width:450px) {
    .ac-wrap2 {
        height: 80vw;
        min-height: 800px;
        background-position: top 38vw left;
        background-size: 89%;
    }
}

@media screen and (max-width:400px) {

    .ac-wrap2 {
        background-position: top 54vw left -3vw;
        background-size: 95%;
    }

}

@media screen and (max-width:380px) {

    .ac-wrap2 {
        background-position: top 68vw left;
    }

}

/* sub */

.access-sub .wrap .inner .ttl p {
    font-size: 3rem;
}

@media screen and (max-width:850px) {

    .access-sub .wrap .inner {
        margin-bottom: 10px;
    }

    .access-sub .wrap .inner .ttl p {
        letter-spacing: var(--lsp-35);
        font-size: 1.6rem;
    }

}

/* tables */

.tables .tables-section .tables-cont p {
    line-height: var(--lh-20);
    font-size: 2.8rem;
}

.tables .tables-section .tables-cont .c-table .t-ttl .week {
    border-left: 2px solid var(--blue);
    vertical-align: middle;
}

.tables .tables-section .tables-cont .c-table .t-ttl .m-ttl {
    border-bottom: 2px solid #fff;
}

.tables .tables-section .tables-cont .c-table .t-desc {
    font-size: 2.6rem;
}

.tables .tables-section .tables-cont .c-table td,
.tables .tables-section .tables-cont .c-table th {
    vertical-align: middle;
}

.tables .tables-more::before {
    right: 10.5vw;
    top: -12.5vw;
}

@media screen and (max-width:1600px) {

    .tables {
        background-position: 
        top 7vw right 7.5vw,
        top 25vw left 7vw,
        top 39vw right,
        top 49vw left 2.5vw,
        bottom 95vw right 8.6vw,
        bottom 35vw right 7.3vw,
        bottom 10vw left 7vw;
    }

}

@media screen and (max-width:850px) {

    .tables .tables-section .tables-cont p {
        font-size: 1.6rem;
        letter-spacing: var(--lsp-30);
    }

    .tables .tables-more::before {
        top: -28.5vw;
    }

    .tables .tables-section .tables-cont .c-table table:nth-child(1) {
        margin-bottom: 30px;
    }

    .tables .tables-section .tables-cont .c-table .t-ttl th {
        border-left: 2px solid var(--blue);
        border-right: 2px solid #fff;
    }

    .tables .tables-section .tables-cont .c-table .t-desc th,
    .tables .tables-section .tables-cont .c-table .t-desc td {
        padding: 18px 6px;
    }

    .tables .tables-section .tables-cont .c-table .t-ttl .week {
        width: 29%;
    }

    .tables .tables-section .tables-cont .c-table .t-desc .day {
        width: 29%;
        font-size: 1.4rem;
    }

    .tables .tables-section .tables-cont .c-table .t-desc .time {
        width: 29%;
    }


    .tables .tables-section .tables-cont .c-table .t-ttl .road {
        border-bottom: 2px solid #fff;
        border-right: 2px solid var(--blue);
    }

    .tables .tables-section .tables-cont .c-table .t-ttl .dep {
        width: 29%;
    }

    .tables .tables-section .tables-cont .c-table .t-ttl .arrival {
        border-left: 2px solid #fff;
        border-right: 2px solid var(--blue);
        width: 42%;
    }

}

@media screen and (max-width:500px) {

    .tables .tables-more::before {
        top: -33.5vw;
    }

}

/* tourist spot */

.landmark {
    background-image: 
    url(../images/point-bg_pc7.png),
    url(../images/point-bg_pc5.png),
    url(../images/pointbg-1.png),
    url(../images/point-bg_pc6.png),
    url(../images/pointbg-1.png),
    url(../images/pointbg-1.png),
    url(../images/point-bg_pc2.png),
    url(../images/point-bg_pc5.png),
    url(../images/pointbg-1.png),
    url(../images/point-bg_pc4.png);

    background-size: 
    15.5vw 12.5vw,
    12.5vw 13vw,
    9.6vw,
    6.7vw,
    9.6vw,
    9.6vw,
    16vw 19vw,
    12.5vw 13vw,
    9.6vw,
    14vw 12.5vw;

    background-position: 
    top right,
    top 3.6vw left 3vw,
    top 33vw right 40vw,
    top 46vw right 8.5vw,
    top 70vw right 7vw,
    top 87vw left 7vw,
    top 100vw right,
    top 114vw left 2.5vw,
    bottom 37vw right 35vw,
    bottom 28vw right 10vw;
}

.landmark .title h2 svg {
    width: 24vw;
    max-width: 500px;
}

.landmark .title p {
    max-width: 695px;
}

.landmark .wrap .inner p {
    letter-spacing: var(--lsp-50);
}

@media screen and (max-width:1600px) {

    .landmark .title::before {
        right: 10vw;
    }

}

@media screen and (max-width:1400px) {

    .landmark .title p {
        max-width: 500px;
    }

}

@media screen and (max-width:850px) {

    .landmark {
        background-image: none;
    }

    .landmark .title h2 {
        width: 50vw;
        max-width: 300px;
        margin-bottom: 25px;
    }

    .landmark .wrap .inner::after {
        border-bottom: 5px dotted var(--blue);
    }

    .landmark .title::before {
        right: 0;
    }

}

@media screen and (max-width:500px) {

    .landmark {
        padding-top: 24vw;
        margin-top: -12vw;
    }

}

/* ship information */

.information {
    background-position: 
    top 16.5vw right 7vw,
    top 22.5vw right 34.5vw,
    top 32vw right 8.5vw,
    top 60vw right 7vw,
    top 80vw right,
    top 100vw left 2.6vw,
    top 141vw right 8.5vw,
    top 182vw left 7vw,
    top 195vw right,
    top 212vw left 2.6vw,
    bottom 50vw right 8.5vw;
}

.information .title::before {
    right: 13vw;
}

.information .title p {
    max-width: 945px;
}

.information .title h2 svg {
    width: 31.5vw;
    max-width: 607px;
}

@media screen and (max-width:1800px) {

    .information .title::before {
        right: 8vw;
    }

} 

@media screen and (max-width:1600px) {

    .information .title::before {
        top: -10vw;
    }

}

@media screen and (max-width:1200px) {

    .information .title::before {
        top: -11vw;
    }

}

@media screen and (max-width:850px) {

    .information {
        padding-top: 12.5vw;
    }

    .information .title h2 {
        width: 69.3vw;
        max-width: 450px;
        margin-bottom: 25px;
    }

    .information .title::before {
        top: -30vw;
    }

}

@media screen and (max-width:850px) {

    .information .info-shibushi::before {
        top: 21vw;
    }

}

@media screen and (max-width:500px) {

    .information {
        padding-top: 16.5vw;
        margin-top: -4vw;
    }

}


/* footer */

.footer-btn .en-btn a {
    border: none;
}

footer .lang-btn .tw-btn a,
footer .lang-btn .jp-btn a {
    border: 3px solid #fff;
}