@charset "utf-8";

/* CSS Document */
body.kr {
    font-family: "gulim", sans-serif;
}

ul,
li {
    list-style: none;
}

img {
    max-width: 100%;
}

a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    opacity: 0.8;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    top: 0;
    z-index: 1000;
    height: 100px;
    transition: background-color 0.3s ease;
    background-color: #3690C7;
}

#top header {
    position: fixed;
}

#top header.transparent {
    background-color: transparent;
}

header.scrolled {
    background-color: #3690c7b5;
    background-color: #3690c7;
}

header.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/*　下に下がる動き　*/

header.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo img {
    display: block;
    max-width: 300px;
}

nav {
    display: flex;
    align-items: center;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-menu a {
    color: white;
    font-size: 1em;
}

.hamburger-menu {
    display: none !important;
    flex-direction: column;
    cursor: pointer;
}

.hamburger-menu2 {
    display: none !important;
    flex-direction: column;
    cursor: pointer;
}

.hamburger-menu2 span {
    width: 25px;
    height: 3px;
    background: white;
    margin: 4px 0;
}

.btn-lang {
    position: relative;
}

.btn-lang a.language {
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 5px 10px;
    position: relative;
}

.btn-lang a.language:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/common/icon-globe.png);
    background-size: contain;
    vertical-align: sub;
    margin-right: 5px;
}

.btn-lang a.language:hover,
a.mypage-btn:hover {
    background-color: #000000;
    border: 2px solid #000000;
    transition: 0.6s ease;
    opacity: 1;
}

.btn-lang ul {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    top: calc(100% + 5px);
    left: 0;
    z-index: 1000;
}

.btn-lang ul li a {
    display: block;
    padding: 5px 10px;
    color: #333;
}

.btn-lang:hover ul {
    display: block;
}

.mypage-btn {
    padding: 5px 10px;
    border: 2px solid;
}

.mypage-btn:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/common/icon-user.png);
    background-size: contain;
    vertical-align: sub;
    margin-right: 5px;
}

.slider {
    position: relative;
    z-index: 1;
    height: 100vh;
    /* filter:brightness(0.8);*/
}

.slider-item00 {
    background: url(../img/index/slider00.png);
}

.slider-item01 {
    background: url(../img/index/slider01.png);
}

.slider-item02 {
    background: url(../img/index/slider02.png);
}

.slider-item03 {
    background: url(../img/index/slider03.png);
}

.slider-item04 {
    background: url(../img/index/slider04.png);
}

.slider-item {
    width: 100%;
    /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;
    /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;
    /*背景画像をリピートしない*/
    background-position: center;
    /*背景画像の位置を中央に*/
    background-size: cover;
    /*背景画像が.slider-item全体を覆い表示*/
}

.slick-prev,
.slick-next {
    position: absolute;
    z-index: 3;
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;
    /*矢印の色*/
    border-right: 2px solid #fff;
    /*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {
    left: 2.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right: 2.5%;
    transform: rotate(45deg);
}

.main-v h2 {
    position: absolute;
    z-index: 2;
    top: 10%;
    left: 50%;
    font-size: 3vw;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 3px 2px 0px rgb(234 86 41);
    -webkit-text-stroke: #F44336 1px;
    font-weight: 600;
    transform: translateX(-50%);
}

p.main-lead {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    top: 65%;
    left: 50%;
    font-size: 1.3em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.main-v {
    position: relative;
}

section {
    padding: 100px 10px;
}

section .inner {
    width: 100%;
    max-width: 1096px;
    margin: auto;
}

h3.toph3 {
    position: relative;
    display: inline-block;
    padding: 0 65px;
    margin-bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

h3.toph3:before,
h3.toph3:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    background-color: #FFF967;
}

h3.toph3:before {
    left: 0;
}

h3.toph3:after {
    right: 0;
}

section.navilink ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

section.navilink ul li {
    width: calc(100% / 4 - 20px);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    padding: 30px;
    text-align: center;
}

section.navilink ul li a {
    display: block;
    height: 100%;
    width: 100%;
    color: #000000;
    font-weight: 600;
}

section.navilink ul li a p {
    margin-top: 10px;
}

section.routemap {
    background-image: url(../img/index/bg_routemap.png);
    background-repeat: no-repeat;
    padding: 120px 10px;
}

section.routemap .inner {
    max-width: 1300px;
    display: flex;
    color: #ffffff;
    gap: 20px;
}

section.routemap .inner .route-text,
section.routemap .inner .route-img {
    width: calc(100% / 2 - 20px);
}

.routemap h3.toph3 {
    left: 0;
    transform: none;
}

.routemap h3.toph3:after {
    height: 0;
}

.route-text ul {
    margin-top: 50px;
    line-height: 3.5;
}

.route-text ul li a {
    color: #000000;
    background-color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;
    border: 2px solid #19a8a3;
}

.route-text ul li.motobu a {
    border: 2px solid #E91E63;
}

.route-text ul li a span {
    color: #CA3232;
    font-weight: 600;
    margin-left: 10px;
}

section.convenience {
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 20px,
            rgba(0, 0, 0, 0.04) 21px, rgba(0, 0, 0, 0.04) 21px,
            transparent 22px, transparent 41px,
            rgba(0, 0, 0, 0.04) 42px, rgba(0, 0, 0, 0.04) 42px,
            transparent 43px, transparent 62px,
            rgba(0, 0, 0, 0.04) 63px, rgba(0, 0, 0, 0.04) 63px,
            transparent 64px, transparent 83px,
            rgba(0, 0, 0, 0.04) 84px, rgba(0, 0, 0, 0.04) 84px,
            transparent 85px, transparent 104px,
            rgba(0, 0, 0, 0.04) 105px, rgba(0, 0, 0, 0.04) 105px),
        repeating-linear-gradient(to right,
            transparent 20px,
            rgba(0, 0, 0, 0.04) 21px, rgba(0, 0, 0, 0.04) 21px,
            transparent 22px, transparent 41px,
            rgba(0, 0, 0, 0.04) 42px, rgba(0, 0, 0, 0.04) 42px,
            transparent 43px, transparent 62px,
            rgba(0, 0, 0, 0.04) 63px, rgba(0, 0, 0, 0.04) 63px,
            transparent 64px, transparent 83px,
            rgba(0, 0, 0, 0.04) 84px, rgba(0, 0, 0, 0.04) 84px,
            transparent 85px, transparent 104px,
            rgba(0, 0, 0, 0.04) 105px, rgba(0, 0, 0, 0.04) 105px);
}

.convenience .box {
    background: #F8F8F8;
    padding: 30px;
    position: relative;
    margin-bottom: 30px;
}

.convenience .box img {
    margin: 20px auto 50px;
    display: block;
}

.convenience .box .text {
    display: flex;
    gap: 20px;
    align-items: center;
}

.convenience .box .text h4 {
    width: 30%;
    z-index: 1;
    font-size: 1.6em;
}

.convenience .box .text p {
    width: calc(70% - 20px);
}

.convenience .box:before {
    content: "";
    display: inline-block;
    width: 151px;
    height: 221px;
    background-image: url(../img/index/1.png);
    background-size: contain;
    position: absolute;
    bottom: 0;
}

.convenience .box.con2:before {
    background-image: url(../img/index/2.png);
}

.convenience .box.con3:before {
    background-image: url(../img/index/3.png);
    /*top:0;*/
}

section.flow {
    background-color: #DFEEF5;
    border-bottom: 3px solid #78C9D6;
}

section.fbg {
    position: relative;
}

section.fbg:before,
section.fbg:after {
    content: "";
    display: inline-block;
    width: 705px;
    height: 602px;
    background-image: url(../img/common/sectionbg.png);
    background-size: contain;
    position: absolute;
}

section.fbg:before {
    top: 0;
    left: 0;
}

section.fbg:after {
    transform: rotate(3.142rad);
    bottom: 0;
    right: 0;
}

section.flow .inner {
    position: relative;
    z-index: 1;
}

section.flow ul {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 30px;
}

section.flow ul li {
    width: calc(100% / 3 - 20px);
    position: relative;
    background-color: #ffffff;
    padding: 0 30px 30px;
    margin-top: 30px;
    border: 5px solid #FAF9CD;
}

section.flow ul li p.step {
    position: relative;
    background-color: #FE8583;
    color: #ffffff;
    font-size: 2.0em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    padding: 20px 0;
    border-radius: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: -20px;
    width: 5vw;
    height: 5vw;
    min-width: 80px;
    min-height: 80px;
}

section.flow ul li p.step span {
    font-size: 0.5em;
    font-weight: 300;
    display: block;
}

section.flow ul li img {
    width: 100%;
}

section.news ul {
    border-top: 1px solid #eeeeee;
    margin-bottom: 60px;

}

section.news ul li {
    border-bottom: 1px solid #eeeeee;
    padding: 30px;
    position: relative;
}

section.news ul li:before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    transform: rotate(45deg);
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}

section.news ul li a {
    color: #000000;
    line-height: 2;
    display: flex;
    gap: 0 20px;
    align-items: center;
    flex-wrap: wrap;
}

section.news ul li a span.categry {
    font-size: 0.8em;
    border: 1px solid;
    line-height: 1;
    padding: 8px 10px 5px;
}

section.news ul li a span.time {
    color: #666666;
}

section.news ul li a p {
    width: 100%;
    font-size: 1.2em;
}

a.morelink {
    background-color: #3690C7;
    color: #ffffff;
    padding: 20px 60px 20px 30px;
    font-weight: 600;
    position: relative;
    display: block;
    margin: auto;
    width: fit-content;
}

a.morelink:before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
}

section.blog {
    background-color: #FAEEE0;
    border-top: 3px solid #FF6600;
}

section.blog .inner {
    position: relative;
    z-index: 1;
}

section.blog ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
}

section.blog ul li {
    width: calc(100% / 3 - 20px);
    background-color: #ffffff;
    border-radius: 30px;
}

section.blog ul li img {
    border-radius: 30px 30px 0 0;
    max-height: 230px;
    object-fit: cover;
    width: 100%;
}

section.blog ul li div {
    padding: 20px;
}

section.blog ul li div span {
    font-size: 0.8em;
    color: #FF6600;
}

section.blog ul li div span.categry:after {
    content: "/";
    margin: 0 5px;
}

section.link ul {
    width: 80%;
    margin: auto;
}

section.link ul li a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    gap: 30px;
    position: relative;
}

section.link ul li a:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url(../img/common/blanklink.png);
    background-size: contain;
    right: 30px;
}

#breadcrumbs {
    border-top: 1px solid #DDDDDD;
}

#breadcrumbs ul {
    max-width: 1096px;
    margin: auto;
    display: flex;
    gap: 30px;
    font-size: 0.8em;
    align-items: center;
    padding: 7px 5px 5px;
}

#breadcrumbs ul li {
    position: relative;
}

#breadcrumbs ul li a:after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto 0 auto 10px;
}

/*
#breadcrumbs ul li a img {
    padding-top: 6px;
}*/

footer {
    background-color: #DFEEF5;
    position: relative;
    overflow: hidden;
}

footer:after {
    content: "";
    display: inline-block;
    width: 705px;
    height: 602px;
    background-image: url(../img/common/sectionbg.png);
    background-size: contain;
    position: absolute;
    transform: rotate(3.142rad);
    bottom: 0;
    right: 0;
}

img.footer-top {
    width: 100%;
    position: relative;
    z-index: 1;
}

footer .inner {
    width: 100%;
    max-width: 1096px;
    margin: 0 auto 100px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 50px 10px;
}

footer .inner dl {
    width: calc(25% - 15px);
    line-height: 2;
}

footer .inner dl dt.guidebook a:before,
footer .inner dl dt.busstop a:before,
footer .inner dl dt.timetable a:before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url(../img/common/icon-guidebook_b.png);
    background-size: contain;
    vertical-align: sub;
    margin-right: 5px;
}

footer .inner dl dt.timetable a:before {
    background-image: url(../img/common/icon-timetable_b.png);
}

footer .inner dl dt.busstop a:before {
    background-image: url(../img/common/icon-busstop_b.png);
}

footer .inner dl dt {
    font-size: 1.2em;
    font-weight: 600;
}

footer .inner dl a {
    position: relative;
}

footer .inner dl dd a {
    padding-left: 25px;
}

footer .inner dl dd a:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 5px;
    border-top: 3px solid #D9D9D9;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
}

.footer-bottom {
    background-color: #3690C7;
    padding: 5px 10px;
    height: 30px;
}

.footer-bottom p {
    color: #ffffff;
    font-size: 0.9em;
}

.searcharea {
    position: fixed;
    bottom: 0;
    z-index: 2000;
    height: 150px;
    background-color: #00000099;
    width: 100%;
    padding: 15px;
}

.search {
    max-width: 1096px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.search ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 70%;
    background-color: #ffffff;
}

.search ul li {
    width: calc(100% / 3);
    position: relative;
    background-image: url(../img/common/icon-up.png);
    background-position: center right 15%;
}

.search ul li#dateInput {
    background-image: url(../img/common/icon-calendar.png);
}

.search ul li:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom,
            #ffffff 0%, #ffffff 20%,
            #F1F1F1 20%, #F1F1F1 80%,
            #ffffff 80%, #ffffff 100%);
}

.search ul li:last-child:after {
    content: none;
}

.search ul li.pax {
    width: calc(30% / 2);
}

.search input,
.search select {
    height: 80px;
    width: 100%;
    padding: 20px 20px 0;
}

.search label {
    font-size: 0.8em;
    display: block;
    color: #9B9B9B;
    position: absolute;
    top: 15px;
    left: 20px;
}

.search button {
    width: 30%;
    background-color: #ea5629;
    color: #ffffff;
    text-align: center;
    display: block;
}

#searchForm h2 {
    margin: 0 auto 10px;
    position: relative;
    display: block;
    padding: 0 30px;
    text-align: center;
    color: #ffffff;
    font-size: 1.4em;
    width: fit-content;
    text-shadow: 0 2px 0 #000000;
    font-weight: 300;
}

#searchForm h2:before,
#searchForm h2:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 24px;
    height: 3px;
    background-color: #ffffff;
    -webkit-transform: rotate(-60deg);
    transform: translateY(-3px) rotate(-60deg);
    box-shadow: inset 0 1px 0 #000000;
}

#searchForm h2:before {
    left: 0;
    transform: translateY(-3px) rotate(60deg);
}

#searchForm h2:after {
    right: 0;
}

.cap {
    position: relative;
}

span.caption {
    position: absolute;
    bottom: 0;
    left: 70%;
    color: #ffffff;
    font-size: 0.8em;
}

.infonew {
    padding: 50px 0;
}

.infonew h2 {
    background: #214280;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    padding: 9px 10px 9px 30px;
    margin-bottom: 15px;
    position: relative;
    margin-top: 1.2em;
}

.infonew h2:before {
    background: #fff;
    border-radius: 30px;
    bottom: 0;
    content: "";
    display: block;
    height: 60%;
    left: 14px;
    margin: auto;
    top: 0;
    position: absolute;
    width: 10px;
}

.infonew h3 {
    border-left: 8px solid #214280;
    font-size: 1.2em;
    font-weight: 700;
    margin: 1.5rem 0 0;
    padding-left: 1rem;
}

.infonew p {
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 10px;
}

.infonew p span {
    color: #cc0000;
}

.infonew img {
    max-width: 250px;
    margin: 10px;
    border: 1px solid #cccccc;
}

div#renew-mailguide2023 ul li {
    border: none;
    padding: 10px;
    background-color: #797a7c;
}

div#renew-mailguide2023 ul li.docomo {
    background-color: #cc0133;
}

div#renew-mailguide2023 ul li.au {
    background-color: #eb5405;
}

div#renew-mailguide2023 ul li.ymobile {
    background-color: #ff0000;
}

div#renew-mailguide2023 ul li a {
    color: #ffffff;
}

div#faq p {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

@media (max-width: 768px) {
    span.caption {
        left: 60%;
    }

    header {
        height: 70px;
    }

    .logo img {
        height: 30px;
    }

    .nav-menu {
        /*display: none;*/
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }

    .nav-menu li {
        margin: 10px 0;
        text-align: center;
    }

    .hamburger-menu {
        display: flex;
    }

    .nav-menu.active {
        display: flex;
    }

    section {
        padding: 50px 10px;
    }

    .main-v h2 {
        font-size: 7vw;
        top: 25%;
        width: 80%;
    }

    p.main-lead {
        top: 63%;
        width: 90%;
        font-size: 1em;
        text-align: left;
    }

    h3.toph3 {
        margin-bottom: 40px;
    }

    section.navilink ul {
        gap: 5px;
    }

    section.navilink ul li {
        padding: 15px;
        width: calc(100% / 2 - 5px);
    }

    section.navilink ul li a img {
        height: 30px;
    }

    section.navilink ul li a p {
        margin-top: 0;
    }

    section.routemap {
        padding: 50px 10px;
    }

    section.routemap .inner {
        display: block;
    }

    section.routemap .inner .route-text,
    section.routemap .inner .route-img {
        width: 100%;
    }

    .convenience .box .text {
        display: block;
    }

    .convenience .box .text h4 {
        width: 100%;
        text-align: center;
    }

    .convenience .box .text p {
        width: 100%;
    }

    section.flow ul li {
        width: 100%;
        margin-top: 10px;
    }

    section.blog ul li {
        width: 90%;
        margin: auto;
    }

    section.link ul {
        width: 90%;
    }

    section.link ul li a {
        gap: 0;
    }

    section.link ul li a:after {
        right: 10px;
        bottom: 15px;
    }

    section.link ul li a img {
        height: 100px;
        object-fit: cover;
        width: 100%;
    }

    section.link ul li a dl {
        padding: 5px;
    }

    footer .inner {
        gap: 10px;
        font-size: 3.3vw;
        margin: 0 auto;
    }

    footer .inner dl {
        width: calc(50% - 5px);
    }

    footer .inner dl.full {
        width: 100%;
    }

    footer .inner dl.full dt.flogo img {
        width: 80%;
        display: block;
        margin: auto;
    }

    .searcharea {
        height: auto;
    }

    .search {
        display: block;
    }

    .search input,
    .search select {
        height: 70px;
    }

    .search ul {
        width: 100%;
    }

    .search ul li {
        background-position: center right 30px;
        width: 50%;
    }

    .search ul li#dateInput {
        width: 100%;
    }

    .search ul li.pax {
        width: 50%;
    }

    .search button {
        width: 100%;
        height: 50px;
    }

    section.fbg:before,
    section.fbg:after {
        width: 300px;
        height: 256px;
    }

    .infonew {
        padding: 30px 10px;
    }
}


.ptitle {
    background-color: #E2F0F6;
    padding: 50px;
    border-bottom: 4px solid #428DD1;
}

.ptitle h2 {
    font-size: 1.8em;
    font-weight: 600;
    max-width: 1370px;
    margin: auto;
}

.innner {
    max-width: 1096px;
    margin: auto;
}

.rosenbtn .innner,
.areabtn .innner {
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
    align-items: center;
}

.rosenbtn .innner h3 {
    width: calc(100%/4);
    text-align: center;
    padding: 0px;
    font-size: 1.4em;
}

.areabtn .innner h3 {
    width: calc(100%/3);
    text-align: center;
    /*padding: 20px;*/
    font-size: 1.4em;
}

.rosenbtn .innner h3 a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.rosenbtn .innner h3 a:hover {
    background-color: #F8F8F8;
    border-top: 3px solid #428DD1;
    opacity: 0.8;
}

.rosenbtn .innner h3.act a:hover {
    border-top: none;
}

/*
.rosenbtn .innner h3.act,
.areabtn .innner h3.act{
    background-color: #F8F8F8;
    border-top: 3px solid #428DD1;
}*/
section.gwrap {
    background-color: #F8F8F8;
}

section.gwrap .innner .box {
    background-color: #ffffff;
    padding: 50px;
    margin-bottom: 50px;
}

section.gwrap .innner .box h4 {
    position: relative;
    display: inline-block;
    padding: 0 65px;
    margin-bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4em;
}

section.gwrap .innner .box h4:before,
section.gwrap .innner .box h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    background-color: #D9D9D9;
}

section.gwrap .innner .box h4:before {
    left: 0;
}

section.gwrap .innner .box h4:after {
    right: 0;
}

.box.fare table {
    width: 100%;
    border-spacing: 0;
}

.box.fare table th {
    border: 1px solid #dddddd;
    border-right: none;
    padding: 10px;
    background-color: #F8F8F8;
    font-weight: 300;
}

.box.fare table td {
    border: 1px solid #dddddd;
    border-right: none;
    padding: 10px;
    text-align: center;
}

.box.fare table td:last-child {
    border-right: 1px solid #dddddd;
}

p.caution {
    background-color: #FFF6CF;
    border: 1px solid #ffd40d;
    border-radius: 5px;
    font-size: 0.8em;
    padding: 15px;
    margin-top: 30px;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 0 20px;
    flex-wrap: wrap;
}

.tab_item {
    width: calc(100%/3);
    height: 60px;
    border: 1px dotted #428DD1;
    border-bottom: none;
    line-height: 60px;
    font-size: 1.2em;
    text-align: center;
    display: block;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tab_item:hover {
    opacity: 0.75;
}

input[name="tab_item"] {
    display: none;
}

.tab_content {
    width: 100%;
    border: 1px solid #428DD1;
    display: none;
    padding: 40px;
    clear: both;
    overflow: hidden;
}

#arrchatan:checked~#arrchatan_content,
#depchatan:checked~#depchatan_content {
    display: block;
}

.tabs input:checked+.tab_item {
    background-color: #3690C7;
    color: #ffffff;
}

.tab_content table {
    width: 100%;
    border-spacing: 0;
}

.tab_content table th {
    border: 1px solid #dddddd;
    border-right: none;
    padding: 10px;
    background-color: #F8F8F8;
    font-weight: 300;
}

.tab_content table td {
    border: 1px solid #dddddd;
    border-right: none;
    padding: 10px;
    border-top: none;
    text-align: center;
}

.tab_content table th:last-child,
.tab_content table td:last-child {
    border-right: 1px solid #dddddd;
}

.main-lead .unkoukaishi {
    display: block;
    font-size: 2.0em;
    background-color: #e73186;
    width: fit-content;
    padding: 10px 40px;
    border-radius: 50px;
    text-shadow: none;
    font-weight: 600;
    margin: 20px auto;
}

.main-lead .price {
    color: #ca1e46;
    font-size: 2.0em;
    text-shadow: none;
    font-weight: 600;
    -webkit-text-stroke: #ffffff 1px;
}

p.service {
    background-color: #19a8a3;
    position: absolute;
    z-index: 997;
    top: 15%;
    left: 70%;
    color: #ffffff;
    display: flex;
    align-items: center;
    width: 12vw;
    justify-content: center;
    height: 12vw;
    font-size: 2vw;
    text-align: center;
    line-height: 1.1;
    border-radius: 100%;
    font-weight: 600;
}

@media (max-width: 768px) {
    p.service {
        top: 16vw;
        left: 60%;
        width: 35vw;
        height: 35vw;
        font-size: 6vw;
    }

    .main-lead .unkoukaishi {
        font-size: 1.2em;
        margin: 20px auto 0;
        text-align: center;
        line-height: 1.1;
    }
}

/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
    display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
    background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
    font-size: 1.2rem;
    text-align: center;
    margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
    padding: 0;
}

.modaal-content-container .flexbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.modaal-content-container img {
    margin: auto;
    display: block;
}

footer .inner img {
    margin: auto;
}

/*以下はコンテンツ内のレイアウト*/
.info-list dl,
.gallery-list {
    display: flex;
}

.info-list dt {
    margin: 0 10px 0 0;
}

/*エリアの表示非表示と形状*/
.area {
    display: none;
    /*はじめは非表示*/
    opacity: 0;
    /*透過0*/
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;
    /*表示*/
    animation-name: displayAnime;
    /*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.service ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.service ul li {
    width: calc(50% - 20px);
    border: 10px solid #19a8a3;
    padding: 20px;
}

.service ul li h4 {
    text-align: center;
    font-size: 1.6em;
}

.service ul li h5 {
    background: #19a8a3;
    padding: 5px;
    color: #ffffff;
    font-size: 1.2em;
    text-align: center;
    margin: 10px auto;
}

.service ul li dl {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.service ul li dl dt {
    width: 30%;
    border: 1px solid #ccc;
    padding: 10px;
    font-weight: 600;
    background-color: #F8F8F8;
}

.service ul li dl dd {
    padding: 10px;
    border: 1px solid #ccc;
    width: 70%;
    margin-left: 0;
}

.service ul li dl dd span {
    color: #d13c5f;
    font-weight: 600;
    font-size: 1.3em;
}

.service ul li.motobu {
    border: 10px solid #E91E63;
}

.service ul li.motobu h5 {
    background: #E91E63;
}

.service ul li.naha {
    border: 10px solid #7d4396;
}

.service ul li.naha h5 {
    background: #7d4396;
}

.service ul li.nahamotobu {
    border: 10px solid #ecb91c;
}

.service ul li.nahamotobu h5 {
    background: #ecb91c;
}

.scrolldown4 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 1%;
    right: 50%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1s ease-in-out infinite;
    z-index: 99;
    display: none;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
    0% {
        bottom: 1%;
    }

    50% {
        bottom: 3%;
    }

    100% {
        bottom: 1%;
    }
}

/*Scrollテキストの描写*/
.scrolldown4 span {
    /*描画位置*/
    position: absolute;
    left: -20px;
    bottom: 10px;
    /*テキストの形状*/
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown4:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: 0;
    /*矢印の形状*/
    width: 1px;
    height: 50px;
    background: #eee;
}

.service ul.tab a {
    background-color: #ea5629;
    padding: 10px 40px 10px 20px;
    margin: 30px auto 0;
    width: fit-content;
    color: #ffffff;
    border-radius: 50px;
    position: relative;
    display: flex;
    align-items: center;
}

.service ul.tab a:before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #fff;
    transform: rotate(135deg) translateY(5px);
    right: 15px;
    margin: auto;
}

section.link ul li a dl {
    width: calc(100% - 420px - 30px);
}

section.link ul li {
    margin-bottom: 30px;
}

section.link ul li a dl dt {
    width: 80%;
    font-weight: 600;
}

section.link ul li a dl dd {
    width: 80%;
    margin-left: 0;
}

div#renew-mailguide2023 ul {
    display: flex;
    gap: 20px;
    margin: 30px auto;
}

div#renew-mailguide2023 ul li {
    width: calc(100% / 5);
    text-align: center;
}

.infonew table {
    margin: 10px;
}

.infonew table th {
    background-color: #eee;
    padding: 5px;
}

.infonew table td {
    padding: 5px;
}

.infonew#info_index img {
    border: none;
}

.infonew#info_index ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.infonew#info_index ul li {
    width: calc(100%/5 - 20px);
    text-align: center;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .service ul li {
        width: 100%;
    }

    .service ul li h5 {
        padding: 5px 2px;
        font-size: 1.0em;
    }

    section.link ul li a dl {
        width: 100%;
    }

    section.link ul li a dl dd {
        width: 87%;
    }

    .rosenbtn .innner h3 {
        width: calc(100% / 2);
        font-size: 0.9em;
        font-weight: 300;
    }

    section.gwrap .innner .box {
        padding: 30px 20px;
    }

    .tab_item {
        width: calc(100% / 2 - 20px);
        height: 50px;
        line-height: 50px;
        font-size: 0.8em;
        font-weight: 300;
    }

    .tab_content {
        padding: 30px 20px;
    }

    .infonew#info_index ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }

    .infonew#info_index ul li {
        width: calc(100%/2 - 10px);
        text-align: center;
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
        padding: 10px;
    }
}

.slick-prev,
.slick-next {
    background-color: #ffffff00;
}

.slick-prev:before,
.slick-next:before {
    border: 0;
}

.btnBack a {
    color: #ffffff;
}

#modelcoures .innner {
    padding: 75px 50px;
}

#modelcoures h3 {
    font-size: 1.4em;
    margin-bottom: 20px;
}

#modelcoures p {
    font-size: 1.1em;
    line-height: 1.5;
}


#modelcoures h4 {
    position: relative;
    display: inline-block;
    padding: 0 70px;
    margin: 30px auto;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4em;
}

#modelcoures h4:before,
#modelcoures h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #666;
}

#modelcoures h4:before {
    left: 0;
}

#modelcoures h4:after {
    right: 0;
}

.modelbox {
    display: flex;
    flex-wrap: wrap;
}

.modelbox div {
    width: calc(50%);
}

p.line {
    border: 1px solid #3690C7;
    padding: 10px 20px;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

p.line span {
    display: block;
    font-size: 0.8em;
    color: #666;
}

p.line.after {
    margin-bottom: 50px;
}

p.line.after:after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    border-left: 1px solid #3690C7;
    height: 50px;
}

p.line.before {
    margin-top: 50px;
}

p.line.before:after {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    border-left: 1px solid #3690C7;
    height: 50px;
}

#modelcoures ul {
    padding: 0 20px;
}

.modelbox div.full {
    width: 100%;
}

.modelbox div.full img {
    margin: 0 auto;
}

li.abouttime p:before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    background-image: url(/module/img/modelcoures/timeicon.png);
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}

#modelcoures h5 {
    font-size: 1.4em;
}

.blinking {
    -webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    #modelcoures .innner {
        padding: 50px 10px;
    }

    .modelbox div {
        width: 100%;
    }

    #modelcoures ul {
        padding: 10px 0;
    }

    span.blinking:before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(https://goo-chatan.com/module/img/common/icon-search.png);
        background-size: contain;
        vertical-align: sub;
        margin-right: 5px;
    }

    /* 241019 */

    .main-v h2 {
        top: 10vh;
    }

    .main-v h2 img {
        max-width: 30vh;
        margin: auto;
        display: block;
    }

    p.main-lead {
        top: 34vh;
        font-size: 0.9em;
    }

    .main-lead .unkoukaishi {
        font-size: 1.2em;
        margin: 5px auto 0;
    }

    .slider,
    .slider-item {
        height: 50vh;
    }

    .yoyaku.add1019 {
        padding: 10px;
    }

    .yoyaku.add1019 .search ul {
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .yoyaku.add1019 .search ul li {
        width: 100%;
        background-image: url(../img/common/icon-down.png);
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .yoyaku.add1019 .search input,
    .yoyaku.add1019 .search select {
        height: 65px;
    }

    .yoyaku.add1019 .search ul li:after {
        width: 0;
    }

    .search ul li#dateInput_top {
        width: 100%;
    }

    .search ul li#dateInput_top {
        background-image: url(../img/common/icon-calendar.png);
    }

    .yoyaku.add1019 form {
        padding: 20px;
        background-color: #f8813930;
        border: 5px solid #FF9800;
        margin-top: 30px;
    }

    .service ul li {
        border: 5px solid #19a8a3;
    }

    .yoyaku.add1019 h2 {
        margin: 0 auto 10px;
        position: relative;
        display: block;
        padding: 0 30px;
        text-align: center;
        color: #000000;
        font-size: 1.4em;
        width: fit-content;
        font-weight: 600;
    }

    .yoyaku.add1019 h2:before,
    .yoyaku.add1019 h2:after {
        content: '';
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 24px;
        height: 3px;
        background-color: #000000;
        -webkit-transform: rotate(-60deg);
        transform: translateY(-3px) rotate(-60deg);
    }

    .yoyaku.add1019 h2:before {
        left: 0;
        transform: translateY(-3px) rotate(60deg);
    }

    .service ul li.naha {
        border: 5px solid #7d4396;
    }

    .service ul li.motobu {
        border: 5px solid #E91E63;
    }

    .service ul li.nahamotobu {
        border: 5px solid #ecb91c;
    }

    div#ui-datepicker-div {
        z-index: 2001 !important;
    }

    .ntop {
        margin: -50px 0 30px;
    }
}

button#toggleSearch {
    display: none;
}

.telyoyaku {
    position: fixed;
    bottom: 115px;
    z-index: 2001;
    right: 20px;
    background: #65a8d1;
    padding: 5px;
    cursor: pointer;
    font-size: 1.1em;
    text-align: center;
    border-radius: 100px;
    width: 200px;
    height: 200px;
    padding-top: 38px;
}

.telyoyaku a {
    color: #214280;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
}

.telyoyaku a span {
    display: block;
    font-size: 0.8em;
    font-weight: 300;
    color: #ffffff;
}

.telyoyaku a img {
    width: 20px;
}

@media screen and (max-width: 768px) {
    .telyoyaku {
        bottom: 0px;
        right: 0px;
        padding: 15px;
        border-radius: 10px 0 0 0;
        width: auto;
        height: auto;
        padding-top: 15px;
    }

    .telyoyaku a span {
        font-size: 0.65em;
    }
}

/* PC・SP表示 */
.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }
}

.operationstatus {
    background-color: #f9f9f9;
    padding: 10px;
}

.operationstatus h3 {
    background: #214280;
    color: #ffffff;
    padding: 5px;
    font-size: 1.1em;
    width: 100%;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

.operationstatus h3 span {
    font-weight: 300;
    font-size: 0.9em;
}

.operationstatus dl {
    display: flex;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    background-color: #ffffff;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.operationstatus dl dt,
.operationstatus dl dd {
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    padding: 5px;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.operationstatus dl dt {
    width: calc(58% / 3);
}

.operationstatus dl dd {
    width: 14%;
}

.operationstatus span.operate:before {
    content: "運行";
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.4;
    color: #3daa35;
}

.operationstatus span.suspended:before {
    content: "運休";
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.4;
    color: #dc0f16;
}

.operationstatus.cn span.operate:before {
    content: "运营";
}

.operationstatus.cn span.suspended:before {
    content: "停运";
}

.operationstatus.tw span.operate:before {
    content: "營運";
}

.operationstatus.tw span.suspended:before {
    content: "停駛";
}

.operationstatus.kr span.operate:before {
    content: "운행";
}

.operationstatus.kr span.suspended:before {
    content: "운휴";
}

.operationstatus.en span.operate:before {
    content: "Operating";
    line-height: 1;
}

.operationstatus.en dl {
    flex-wrap: wrap;
}

.operationstatus.en dl dt,
.operationstatus.en dl dd {
    width: calc(100% / 6);
}

.operationstatus.en span.suspended:before {
    content: "Not Operating";
    line-height: 1;
}

.operationstatus p {
    background-color: #ffeaed;
    padding: 5px 10px;
    margin: 10px auto 0;
    border: 1px solid #f36060;
    width: fit-content;
    border-radius: 5px;
}

.operationstatus p:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
    height: 20px;
    width: 20px;
    display: inline-block;
    background-size: contain;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    .operationstatus h3 span {
        display: block;
    }

    .operationstatus.en dl dt,
    .operationstatus.en dl dd {
        width: 50%;
    }
}

.telyoyaku {
    display: none !important;
}