charset "utf-8";
@import url(icon.css);
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

.jtb-nav-breadcrumb { margin-bottom: 25px; max-width: 1236px; }
.l-page { font-size: 16px; line-height: 1.6; text-align: center; width: 100%; overflow: hidden;}
.l-page * { -ms-box-sizing: border-box; box-sizing: border-box; }
.l-page h1 { font-size: 18px; font-weight: bold; line-height: 1; margin: 0 auto 25px; max-width: 1236px; text-align: left; }
.l-page a, .l-page a img { transition: all .4s ease; }
.l-page img { display: block; margin: 0 auto; max-width: 100%; transition: opacity 3s ease; }
.l-page img.lazyload { border-radius: .5em; opacity: 0; }
.l-page img.lazyloaded { opacity: 1; }
.js-btn-page-top { bottom: 50px; cursor: pointer; display: none; position: fixed; right: 50px; z-index: 100; }
.js-btn-page-top a { display: block; height: 17px; position: relative; width: 35px; }
.js-btn-page-top a::before { color: #000; content: "";; display: inline-block; font-family: 'jtb-dom' !important; font-size: 4rem; line-height: 50px; width: 100%; }
.js-btn-page-top a:hover { opacity: .8; }

.c-bnr__list { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin: 0 auto; max-width: 900px; width: 100%; }
.c-bnr__item a + * { margin-top: .5em; }
.c-bnr__item .c-title { font-weight: 700; }
.c-bnr__item p { text-align: left; }

.c-btn { align-items: center; border-radius: .375em; display: flex; justify-content: center; position: relative; }
.c-btn span::before, .c-btn span::after { display: inline-block; font-family: "jtb-dom"; position: absolute; top: 50%; transform: translateY(-50%); }
/*.c-btn__solid span::before, .c-btn__solid span::after { color: #fff; }*/
.c-btn__solid span { color: #fff; font-weight: 700; }
.c-btn__white { background-color: #fff; border: 2px solid; transition: all .4s ease; }
.c-btn__white span { font-weight: 700; }
.c-btn__stay span::before { content: "\e806"; }
.c-btn__jr span::before { content: "\e808"; }
.c-btn__air span::before { content: "\e807"; }
.c-bottom__link .c-btn { margin: 0 auto; width: 100%; }
.c-bottom__link .c-btn span::after { content: "\e905"; font-size: .75em; right: 2em; }
.c-faq__list { text-align: left; }
.c-faq__item { background-color: #fff; padding: 0 2.5em; }
.c-faq__item + .c-faq__item { margin-top: .25em; }
.c-faq__item--q, .c-faq__item--a { padding-left: 3em; position: relative; }
.c-faq__item--q { line-height: 1.5; font-weight: bold; padding-bottom: 2em; padding-top: 2em; }
.c-faq__item--q:hover { cursor: pointer; }
.c-faq__item--q::before, .c-faq__item--a::before { font-family: 'Zen Maru Gothic', sans-serif; font-size: 1.5em; font-weight: 700; left: 0; line-height: 1; position: absolute;  }
.c-faq__item--q::before { content: "Q." }
.c-faq__item--q::after { content: "\e313"; display: inline-block;     display: inline-block; font-family: 'Material Icons Round'; font-size: 1.5em; line-height: 1; position: absolute; right: 0; transition: all .5s ease; }
.c-faq__item--a { display: none; padding-bottom: 2em; }
.c-faq__item--a::before { content: "A." }
.c-inner { margin: 0 auto; max-width: 1236px; width: 88%; }

.c-pic .c-cap { display: block; font-size: .8125em; text-align: right; }

section#allplan, section#hkdballpark, section#sec-lounge, section#sec-seat, section#sec-osusumehotel {
    background-image: url(/kokunai/theme/hkdballpark/images/bg.webp);
    background-attachment: fixed;
    background-size: cover;
    background-color: rgb(255 255 255 / 35%);
    background-blend-mode: lighten;
}

section#recommend, section#sec-escon, section#sec-news, section#sec-plan, section#sec-search, section#sec-faq, section#ticket{
    background-image: url(/kokunai/theme/hkdballpark/images/bg2.webp);
    background-attachment: fixed;
    background-size: cover;
    background-color: rgb(255 255 255 / 35%);
    background-blend-mode: lighten;
}


.sec-cal .c-sec__head::before { display: block; font-family: "gwicon"; font-size: 2.3em; line-height: 1; padding-bottom: 0.125em;}
.sec-recommend .c-sec__head::before { display: block; font-family: "gwicon"; font-size: 2.3em; line-height: 1; padding-bottom: 0.125em;}
.sec-recommendarea .c-sec__head::before { display: block; font-family: "gwicon"; font-size: 2.3em; line-height: 1; padding-bottom: 0.125em;}
.sec-plan .c-sec__head::before { display: block; font-family: "gwicon"; font-size: 2.3em; line-height: 1; padding-bottom: 0.125em;}

.c-sec__title { font-size: 2.5em; font-weight: 800; text-shadow: 3px 3px 0px #FFF;}
small {font-size: .6em;}
.c-title span { font-size: 1.8em; font-weight: 800; text-shadow: 3px 3px 0px #FFF;}
.c-word { align-items: center; background-color: #fff; border: 1px solid; display: inline-flex; justify-content: center; }
.c-word span::before { content: "＃"; padding-right: .25em; }
.is-fixed { left: 0; position:fixed; top: 0; z-index: 4; width: 100%;}
.is-open::after { transform: rotate(-180deg); }

.l-anchor { position: absolute; width: 100%; }
.l-anchor .c-item { transform:translateY(-2em); }
.l-anchor .c-item a { align-items: center; background-color: #004a51; border-radius: .375em; display: flex; justify-content: center; width: 100%; }
.l-anchor .c-item span { color: #fff; display: inline-block; font-size: 1.2em; font-weight: 700; line-height: 1.2; margin-bottom: 1em; position: relative; }
.l-anchor .c-item span::after { bottom: -1.5em; content: "\e313"; display: block; font-family: 'Material Icons Round'; font-size: 1.25em; left: 50%; position: absolute; transform: translateX(-50%); transition: all .4s ease; }

@media screen and (max-width:768px){
.l-anchor .c-item span::after { bottom: -1.25em }
.l-anchor__float.is-fixed { background-color: #004a51!important; width: 100%; }
}
.l-anchor__float.is-fixed .c-item { transform:translateY(0); }
.l-anchor__float.is-fixed .c-item span::before { display: inline-block; padding-right: .5em; }
.l-anchor__float.is-fixed .c-item span::after { bottom: -1.75em; }
.l-block .c-title span { font-size: 1.5em; font-weight: 700; line-height: 1; }

.l-contents { background-color: #fcf9f5; }

.sec-plan .c-list { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1em; }
.sec-plan .c-list .c-word { align-items: center; background-color: #fff; border: 1px solid; border-radius: 100vh; display: inline-flex; height: 3.125em; justify-content: center; margin: .5em .25em; padding: 0 2em; }
.sec-plan .c-list .c-word span { font-weight: 700; }
.sec-plan .c-list.c-list__month .c-word { border-color: #B30000; }
.sec-plan .c-list.c-list__season .c-word { border-color: #1b7139; }
.sec-plan .c-list .c-word { border-radius: 100vh; height: 3.125em; margin: .5em .25em; padding: 0 2em; }
.sec-plan .c-bottom__link { margin-top: 3em; }
.sec-plan .c-bottom__link .c-btn { height: 3.625em; max-width: 500px; }
.p-hkdballpark .c-btn__solid {background-color: #004a51;}
.sec-destination .l-block { text-align: left; }
.sec-destination .c-title span { font-size: 1.3125em; }
.sec-destination .c-list { display: flex; flex-wrap: wrap; }
.sec-destination .c-list li { font-size: .9375em; }
#JTBGF-ly_footer.JTBGF-ly_footer { margin-top: 0 !important; }

@media screen and (min-width:769px) and (max-width:1236px) {
  .l-page { font-size: 1.294498vw; margin: 0; }
}
@media screen and (min-width:769px){
  .sp-item { display: none; }
  .breadcrumb-upper { margin: 0 auto 25px; max-width: 1230px; padding: 0 .5em; text-align: left; }
  .breadcrumb-upper__fix, .breadcrumb-upper__scroll, .breadcrumb-upper__item { display: inline-block; font-size: 10px; }
  .breadcrumb-upper__item { line-height: 2.1; margin-left: 1.5em; padding-left: .2em; position: relative; }
  .breadcrumb-upper__item::before { color: #999; content: ">"; left: -1.1em; line-height: 2.1; position: absolute; top: 0; }
  .l-page a:hover { text-decoration: none; }
  .l-page .c-flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
  .c-bnr__item { width: calc(calc(100% - 7.5em) / 3); }
  .c-bnr__item:nth-child(n + 4) { margin-top: 2.5em; }
  .c-sec { padding: 4.25em 0 5em; }
  .c-sec__head,.other-theme-title { margin-bottom: 2em; }
  .c-sec__head { padding-top: 3em; }
  .l-mv { height: 31.25em; }
  .l-anchor, .l-anchor .c-item a { height: 6em; }
  .l-anchor .c-item { width: calc(calc(100% - 1.875em) / 5); }
  .l-anchor .c-item a:hover span::after { bottom: -1.5em; }
  .l-anchor__float.is-fixed .c-item a { height: 5.5em; }
  .l-anchor__float.is-fixed .c-item span { font-size: 1em; }
  .l-anchor__float.is-fixed .c-item a:hover span::after { bottom: -1em; }
  .l-block .c-title span { font-size: 1.5em; }
  .sec-spot .c-item { display: flex; flex-direction: column; width: calc(50% - 1.625em); }
  
  
  .sec-plan .l-block + .l-block { margin-top: 4.375em; }
  .sec-plan .c-list__month .c-word:hover { background-color: #caa946; }
  .sec-plan .c-list__season .c-word:hover { background-color: #46ca93; }
  .sec-destination dd + dt { border-top: 1px solid #d9d9d9; margin-top: 1.5em; padding-top: 2.25em }
  .sec-destination .c-list { margin-top: .5em; }
  .sec-destination .c-list li { line-height: 1; margin: 0 .75em .75em 0; padding: 1px 0; }
  .sec-destination .c-list li::after { color: #ccc; content: "/"; padding-left: .75em; }
  .sec-destination .c-list li:last-child::after { content: none; }
  .sec-destination li a { color: #333; }
}

@media all and (-ms-high-contrast:none){
/*  *::-ms-backdrop, .c-cal__item, .c-empty_item { width: 7.25em; }*/
}

@media screen and (max-width:768px){
  .c-inner { width: 95%; }
  .pc-item { display: none; }
  .breadcrumb-upper { background-color: #fff; border-top: 1px solid #d7d7d7; display: flex; flex-wrap: nowrap; font-size: 10px; line-height: 3rem;  overflow: hidden; position: relative; }
  .breadcrumb-upper__fix { box-shadow: 6px 0 10px 0 rgba(0, 0, 0, .3); position: relative; transition: box-shadow .3s; width: 7em; z-index: 3; }
  .breadcrumb-upper__fix a { padding-left: .5rem; }
  .breadcrumb-upper__scroll { flex: 1; overflow: hidden; }
  .breadcrumb-upper__list { display: flex; flex-wrap: nowrap; height: 3rem; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; }
  .breadcrumb-upper__item a { padding: 0 .5rem 0 1.8rem; }
  .breadcrumb-upper__item:last-child { padding: 0 1.2rem 0 1.8rem; }
  .breadcrumb-upper__fix a, .breadcrumb-upper__item a { display: block; background-color: #fff; text-align: center; position: relative; }
  .breadcrumb-upper__fix a::before, .breadcrumb-upper__item a::before, .breadcrumb-upper__fix a:after, .breadcrumb-upper__item a:after { content: ""; border-style: solid; border-width: 2rem 0 2rem 1rem; position: absolute; top: -.5rem; }
  .breadcrumb-upper__fix a::before, .breadcrumb-upper__item a::before { border-color: transparent transparent transparent #fff; right: -.9rem; z-index: 2; }
  .breadcrumb-upper__fix a::after, .breadcrumb-upper__item a::after { border-color: transparent transparent transparent #d7d7d7; right: -1rem; z-index: 1; }
  .js-btn-page-top { bottom: 20px; right: 20px; }
  .js-btn-page-top a { background-color: #999; border-radius: 6px; display: block; height: 30px; width: 30px; }
  .js-btn-page-top a::before { color: #fff; display: inline-block; font-family: "icon"; line-height: 29px; width: auto; font-size: 2rem;}
  .l-page { font-size: 3.2vw; padding: 20px 0 0; }
  .l-page h1 { margin-bottom: 20px; padding: 0 1%; }
  .c-bnr__item, .c-bnr__item img { width: 100%; }
  .c-bnr__item p, .c-card__item .c-txt p { font-size: 0.7em; }
  .c-bnr__item .c-title { font-size: 1em; }
li.c-bnr__item {
    width: calc(100%/2);
    padding: 10px 3px;
    box-sizing: border-box;
}
  .c-faq__item { padding: 0 5%; }
  .c-faq__item--q, .c-faq__item--a { font-size: 1.125em; }
  .c-faq__item--q { font-size: 1.125em; padding-right: 1.5em; }
  .c-faq__item--q::after { top: 1.5em; }
  .c-sec__head { margin-bottom: 1.5em; padding-top: 2em; }
  .c-sec { padding: 1em 0 2em; }
  .c-sec__title { font-size: 1.8em; text-shadow: 1px 2px 0px #FFF; }
  .c-title span { font-size: 1.5em; font-weight: 800; text-shadow: 1px 1px 0px #FFF; }
  small {font-size: .7em;}
  .l-mv { height: 16.25em; }
  .l-anchor .c-list { display: flex; justify-content: space-between; width: 98%; }
  .l-anchor .c-item { width: calc(calc(100% - 0.5em) / 5); padding-top: 10px;}
  .l-anchor .c-item a { padding: .5em 0; }
  .l-anchor .c-item span { font-size: .825em; }
  .l-anchor__float.is-fixed .c-inner { width: 100%;}
  .l-anchor__float.is-fixed .c-item + .c-item { border-left: 1px solid #eee; }
  .l-anchor__float.is-fixed .c-item a { background-color: #004a51; }
  .l-anchor__float.is-fixed .c-item span { font-size: .75em; line-height: 1.1; }
  .l-anchor__float.is-fixed .c-item span::after { bottom: -1.25em; }

  .sec-plan .l-block + .l-block { margin-top: 2.5em; }
  .sec-plan .c-list .c-word { height: 2.75em; padding: 0 1em; }
  .sec-plan .c-list .c-word { margin: 0 .25em .25em 0; }
  .sec-plan .c-list .c-word span { font-size: 1.125em; }
  .sec-destination .l-block { border-bottom: 1px solid #d9d9d9; }
  .sec-destination .c-inner { width: 100%; }
  .sec-destination .c-title { border-top: 1px solid #d9d9d9; padding: 1em 1.5em; position: relative; }
  .sec-destination .c-title::after { content: "\e313"; display: inline-block; font-family: "Material Icons Round"; font-size: 1.5em; line-height: 1; position: absolute; right: 1em; transition: all .5s ease; }
  .sec-destination .c-title a { color: #333; pointer-events: none; }
  .sec-destination .c-title span { font-size: 1em; }
  .sec-destination dd { display: none; }
  .sec-destination dd .c-list { border-top: 1px solid #eee; display: flex; flex-wrap: wrap; justify-content: space-between; }
  .sec-destination dd .c-item { width: 50%; }
  .sec-destination dd .c-item:nth-child(odd) { border-right: 1px solid #eee; }
  .sec-destination dd .c-item:not(:last-child) { border-bottom: 1px solid #eee; }
  .sec-destination dd .c-item:nth-child(2n+1):nth-last-child(2) { border-bottom: none; }
  .sec-destination dd .c-item a { display: block; padding: .75em 1.5em; }
}

/*  MV
============================================================================= */
@media screen and (min-width:769px){
  .p-hkdballpark .l-mv { background: url(/kokunai/theme/hkdballpark/images/mv_bg.webp) no-repeat center; background-size: contain; background-position: center; width: 100%; height: 0; padding-bottom: 30%; overflow: hidden;position: relative; }
  .l-mv figcaption { position: absolute;right: 10px;bottom: 5px;color: #fff;font-size: 1.2rem;font-weight: bold;}
}
@media screen and (max-width:768px){
  .p-hkdballpark .l-mv { background: url(/kokunai/theme/hkdballpark/images/mv_bg_sp.webp) no-repeat center; background-size: contain; background-position: center; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden;position: relative; }
  .l-mv figcaption { position: absolute;right: 10px;bottom: 20px;color: #fff;font-size: 1rem;font-weight: bold;}
}

/*  エスコート
============================================================================= */
.ly_grid__item a {
  color: #323743 !important;
}
.ranking__bt a {
  color: #fff;
  background: #004a51;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*  記事
============================================================================= */
.sec-news .c-sec__head::before {
    content: "";
    background: url(../images/newsweb/ico_pamphlet.png) center / 100% auto no-repeat;
    display: block;
    margin: 0 auto;
    width: 50px;
    height: 50px;
}
.newswp {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 6px rgb(0 0 0 / 20%);
}
.newswp a:hover {
    opacity: .8;
}
.news_text {
    display: flex;
    flex-direction: column;
}
.news_text h3 {
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: auto;
}
.area::before {
    font-family: 'jtb-dom';
    content: "\e938";
    padding-right: 2px;
    font-size: medium;
}
@media screen and (min-width: 769px){
  .news-cassette {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 85%;
  }
  .newswp {
    width: calc(100% / 4 - 24px);
    border: solid 1.8px #873535;
  }
  .newswp + .newswp {
    margin-left: 24px;
  }
  .news_img {
    padding: 4px;
  }
  .news_img img {
    width: 100%;
    height: 10em;
    object-fit: cover;
    border-radius: 4px;
  }
  .news_text {
    padding: 4px 8px 4px 8px;
  }
  .news_text h3 {
    font-size: 15px;
  }
  .news_areadate {
    padding-top: 12px;
    text-align: right;
    font-size: 14px;
  }
  .newsall_link {
    padding: 28px 92.703px 0px 92.703px;
    text-align: center;
  }
  .news_item:hover{
    color:#323743bd ;
 }
}
@media screen and (max-width: 768px){
  .newswp {
    border: solid 2.8px #873535;
  }
  .newswp + .newswp {
    margin-top: 8px;
  }
  .news_item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }
  .news_img {
    width: 45%;
  }
  .news_img img {
    height: 7.5em;
    object-fit: cover;
  }
  .news_text {
    width: calc(55% - 8px);
    text-align: left;
    padding-left: 4px;
  }
  .news_text h3 {
    font-size: 12px;
  }
  .newsall_link {
    text-align: right;
    padding: 8px 0px;
  }
}


/*  検パネ
============================================================================= */  
@media screen and (max-width: 768px) {
    .search-tab {
      padding-top: 0;
    }
  }


/*  ラウンジ
============================================================================= */  
.lounge01,.lounge02,.lounge03 {
    background-color: #23b9ff;
    padding: 15px 0;
}
.lounge01 p,.lounge02 p,.lounge03 p {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
}

.sec-lounge .c-item .c-txt {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 10px 10px;
    flex-grow: 1;
}
.sec-lounge .c-item .c-title {
    color: #873535;
    font-size: 1.5em;
    font-weight: 700;
}
.sec-lounge .c-bottom__btn.c-flex {
    display: flex;
    justify-content: center;
}
.sec-lounge .c-bottom__btn .c-btn {
    height: 3.375em;
}
.sec-lounge .c-btn__plan {
    position: relative;
}

h4.hotel-title {
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
    padding: 30px 0 10px;
    border: 3px solid #1b67b7;
    margin-bottom: 20px;
}
h4.hotel-title span {
    color: #ffb900;
}
.yado-sect__more {
    text-align: center;
    position: relative;
    font-weight: 700;
    margin-top: 12px;
}
.yado-sect__more a {
    font-weight: bold;
    transition: 0.4s ease;
}
.yado-sect__more span::after {
    display: block;
    position: absolute;
    content: "";
    border-bottom: 2px solid #873535;
    border-right: 3.5px solid #873535;
    transform: skew(40deg);
    height: 10px;
    margin-top: -5px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
}
.yado-img {
    height: 10em !important;
    object-fit: cover;
    width: 100%;
    padding: 4px;
    border-radius: 10px;
}
.yado-img-small {
    display: flex;
    height: 6em;
    width: 100%;
    padding: 0 5px;
    column-gap: 4px;
}
.yado-img-small img {
    object-fit: cover;
    border-radius: 4px;
}
.yado-img-small img {
    width: calc(100% / 2);
}
.hotel-cassette_bt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.hotel-cassette_bt-item a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    min-height: 50px;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: 0;
    line-height: 1.3;
    border-radius: 5px;
    border: solid 1px #b30000;
    background: #b30000;
    transition: ease .2s;
}
.hotel-cassette_bt-item {
    margin-top: 5px;
    width: calc(100% / 2 - 2px);
}
.hotel-cassette_bt-item.-jr a:before {
    content: "\e570";
}
.hotel-cassette_bt-item.-air a:before {
    content: "\e539";
}
.hotel-cassette_bt-item a:before {
    margin-right: 5px;
    font-family: 'Material Icons Round';
    font-size: 2.0rem;
    color: #fff;
    line-height: 1;
}
.hotel-cassette_bt-item em {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
}
.hotel-cassette_bt-item a:after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    font-family: 'Material Icons Round';
    content: "\e5cc";
    font-size: 2.0rem;
}
.hotel-cassette_bt-item span {
    padding-right: 9px;
}
.plan__item-detail {
    text-align: left!important;
}
.plan__item-title {
    font-size: 1.6rem!important;
}
.subject {
    text-align: center;
    margin: -10px 90px 0;
}
.subject p {
    padding: 6px;
    background-color: #1b67b7;
    color: #fff;
    border-radius: 10px;
    transform: translateY(50%) translateX(0em);
}
.subject p:before {
    position: relative;
    font-family: 'Material Icons Round';
    content: "\e636";
    font-size: 100%;
    top: 3px;
    right: 5px;
}
.sec-lounge .c-item .c-pic img {
    width: 100%;
    height: 7em;
}
.c-pic figcaption {
    position: absolute;
    right: .5rem;
    font-size: 1.2rem;
    color: #fff;
    background-color: #323743;
    padding: 0 .8em;
    bottom: 0.6rem;
}
.yado-img-small figure {
    width: calc(100% / 2);
    height: 7em !important;
}


@media screen and (min-width: 769px) {
    .sec-lounge .c-item {
        display: flex;
        flex-direction: column;
        width: calc(calc(100% - 1.7em) / 3);
        margin: 20px 0 20px 0;
        background: #fff;
        box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
        border-radius: 4px;
    }
    
    .sec-lounge .c-item .c-pic {
        text-align: end;
    }
    .sec-lounge .c-bottom__btn .c-btn {
        width: calc(100% - .375em);
    }
    .sec-lounge .c-btn__plan .c-bnt__float {
        width: auto;
    }
    .yado-sect__more span::after {
        width: 20%;
    }
    .subject p {
       font-size: 1.8rem;
    }
}

@media screen and (max-width: 768px) {
    .sec-lounge .c-item {
        margin-bottom: 15px;
    }
    .sec-lounge .c-item {
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
        box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    }
    .sec-lounge .c-bottom__btn .c-btn {
        width: 95%;
    }
    .yado-sect__more {
        margin-top: 20px;
    }
    .yado-sect__more span::after {
        width: 46%;
    }
    .sec-lounge .c-title span {
        font-size: 1.5rem;
    }
    .sec-lounge .c-item .c-txt {
        justify-content: space-evenly;
    }
    .c-pic figcaption {
       right: .3rem;
       font-size: 1rem;
       padding: 0 .3em;
       bottom: 0.3rem;
    }
} 


/*  人気宿
============================================================================= */
.area-osusume-place {
  display: flex;
  justify-content: center;
  column-gap: 8px;
}
.area-osusume-place li {
  border: solid 1px #ccc;
  background: #fff;
}
.area-spotlist-inner-place-osusume dt {
  padding: 5px;
  text-align: left;
}
.area-spotlist-inner-place-osusume dt a {
  font-weight: bold;
}
.yado.area {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: lighter;
}
.yado.area::before {
  content: '\E0C8';
  font-family: 'Material Icons Round';
}
.osusume__listitem:hover {
  opacity: .6;
  transition: all .4s ease;
}

@media screen and (min-width: 769px) {
  .area-osusume-place li {
    width: calc((100% - 40px) / 6);
  }
  .area-spotlist-inner-place-osusume dt a {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 768px) {
  .area-osusume-place {
    flex-wrap: wrap;
  }
  .area-osusume-place li {
    width: calc((100% - 20px) / 2);
    margin-bottom: 8px;
  }
  .area-spotlist-inner-place-osusume dt a {
    font-size: 1.1rem;
  }
}

/*  座席から選ぶ
============================================================================= */
.seat_plan {
    display: flex;
    column-gap: 8px;
}
.seat__listitem {
    border: solid 1px #ccc;
    background: #fff;
    border-radius: 4px;
}
.seat__listitem figcaption {
    font-size: 1.2rem;
    padding-right: 10px;
}
.seat_name {
    font-size: 1.2em;
    padding: 10px;
    text-align: left;
}
.seat__item-detail {
    padding: 8px;
    text-align: left;
}
.seat__item-price {
    margin-top: 8px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #cc0d21;
}
.seat__item-price em {
    font-size: 2.6rem;
    font-weight: bold;
}
.seat__item-note {
    font-size: 1.2rem;
    text-align: center;
}
.seat__listitem img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.seat__listitem a:hover {
    opacity: 0.6;
}
.sheet-note {
    margin-top: 10px;
}

@media screen and (min-width: 769px) {
  .seat_plan li {
    width: calc((100% - 0px) / 4);
  }
    .seat_plan {
    justify-content: center;
  }
   #sec-seat .slider-controls {
        display: none;
  }
  .sheet-note {
    text-align: end;
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
   .pc-hidden-slider {
     display: block;
  }
   .seat__listitem {
     flex: 0 0 calc(100% - 50px);
     padding: 10px;
  }
  .seat__listitem img {
     height: 200px;
     object-fit: cover;
     border-radius: 4px;
  }
}

/*  エスコン商品おすすめポイント
============================================================================= */
.field_bx {
    width: 100%;
    margin: 0px auto;
    max-width: 1236px;
    padding-bottom: 60px;
}
#hkdballpark .field_read {
    margin: 30px 30px;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    line-height: 26px;
    color: #b30000;
}
.nihonnoshun-pc680 {
    display: block;
}
#hkdballpark .sheet_bx {
    background-image: url(/kokunai/theme/hkdballpark/images/pc_sheet.png);
    min-height: 616px;
    max-width: 1235px;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}
.nihonnoshun-pc {
    display: block;
}
#hkdballpark .sheet_bx .btn01 {
    position: absolute;
    top: 10px;
    left: 10px;
}
#hkdballpark .sheet_bx .btn02 {
    position: absolute;
    top: 205px;
    left: 10px;
}
#hkdballpark .sheet_bx .btn03 {
    position: absolute;
    bottom: 60px;
    left: 10px;
}
#hkdballpark .sheet_bx .btn04 {
    position: absolute;
    top: 10px;
    right: 6px;
}
#hkdballpark .sheet_bx .btn05 {
    position: absolute;
    top: 230px;
    right: 30px;
}
#hkdballpark .sheet_bx .btn06 {
    position: absolute;
    bottom: 70px;
    right: 30px;
}
.nihonnoshun-sp {
    display: none;
}

.clearfix {
    display: block;
}
.sheet-sp-buttonbx {
    width: 100%;
    margin: 10px auto 0px;
    padding: 0px;
}
#hkdballpark .park-row .col-md-6, #hkdballpark .park-row .col-sm-6, #hkdballpark .park-row .col-xs-6 {
    position: relative;
    min-height: 1px;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

#hkdballpark .sheet-button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    border-radius: 3px;
    width: 98%;
    height: 60px;
    font-weight: bold;
    position: relative;
    transition: 0.3s;
    margin-bottom: 10px;
    margin-left: 1%;
    margin-right: 1%;
    cursor: pointer !important;
}
.diamond01 {
    background-color: #9F7D30;
}
.diamond02 {
    background-color: #B7A55C;
}
.diamond03 {
    background-color: #F6AB00;
}
.dugout {
    background-color: #8A5CA4;
}
.backnet {
    background-color: #00B2E6;
}
.infield1 {
    background-color: #1B67B7;
}
.sheet_bx ul li a {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
}
.sheet_bx ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.3s ease;
    z-index: 1;
    pointer-events: none;
}
.sheet_bx ul li a:hover::before {
    background-color: rgba(255, 255, 255, 0.3);
}

@media screen and (min-width: 769px) {
    .col-md-6 {
        width: 70%;
    }
    #hkdballpark .field_read-other {
        margin: 5px 30px 30px;
        text-align: left;
        font-size: 30px;
        font-weight: 800;
        line-height: 35px;
        color: #b30000;
    }
}

@media screen and (max-width: 768px) {
    .field_bx {
        padding-bottom: 10px;
    }
    #hkdballpark .sheet_bx {
        background-image: none;
        display: none;
    }
    .nihonnoshun-sp {
        display: block;
    }
    
    #hkdballpark .sheet_spbx {
        width: 100%;
        margin: 0px auto;
    }
    #hkdballpark .field_read {
        margin: 15px 30px;
        text-align: center;
        font-size: 1.6em;
    }
    .field_bx p {
        margin: 10px;
    }
    #hkdballpark .sheet-button {
       font-size: 13px;
       box-shadow: 3px 3px #95999e;
    }
    #hkdballpark .sheet-button::before {
        transform: translateY(-50%) rotate(30deg);
    }
    #hkdballpark .sheet-button::after {
        transform: translateY(-50%) rotate(-30deg);
    }
    .nihonnoshun-sp {
        display: block;
    }
    .col-sm-6 {
        width: 50%;
    }
    .sheet-sp-buttonbx {
        display: flex;
        flex-wrap: wrap;
    }
    #hkdballpark .field_read-other {
        color: #b30000;
        margin: 15px 30px;
        text-align: center;
        font-size: 1.6em;
        font-weight: 800;
    }
}


.point-item {
    display: block;
    background: #fff;
    box-shadow: 0 1px 4px #c7d0d4;
}
.point-ribbon {
    position: relative;
    padding: 8px 0;
    margin: 0 0 0 -20px;
    margin-right: calc(70% + 15px);
}
.point-ribbon02,.point-ribbon03 {
    position: relative;
    padding: 8px 0;
    margin: 0 0 0 -20px;
    margin-right: calc(60% + 15px);
}
.point-ribbon,.point-ribbon02,.point-ribbon03 {
    background: #00588B;
}
.point-ribbon:after,.point-ribbon02:after,.point-ribbon03:after {
    position: absolute;
    content: '';
    z-index: 1;
    top: 0;
    right: 0;
    width: 0px;
    height: 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}
.point-ribbon:before,.point-ribbon02:before,.point-ribbon03:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
}
.point-ribbon:before,.point-ribbon02:before,.point-ribbon03:before {
    border-right: solid 20px #085631;
}
.point01 {
    color: #fff;
    font-weight: bold;
    padding: 0 30px 0 15px;
    border-top: dashed 1px #FFF;
    border-bottom: dashed 1px #FFF;
}
.point_textarea {
  display: flex;
  flex-direction: column;
}
.point_textarea p {
  font-weight: 600;
  text-align: left;
}
.point_textarea img {
  margin-top: -75px;
}

@media screen and (min-width: 769px) {
  .point-wrap {
    display: flex;
    column-gap: 60px;
    row-gap: 43px;
    margin-top: 30px;
  }
  .point-item {
    padding: 30px 0 24px;
  }
  .point-item.other {
    width: calc((100% - 60px) / 2);
    padding: 30px 0 24px;
    position: relative;
  }
  .point01 {
    font-size: 2.8rem;
    line-height: 55px;
  }
  .point_img {
    width: 36%;
    position: absolute;
    right: 20px;
    top: 10px;
  }
  .point-ribbon:after,.point-ribbon02:after,.point-ribbon03:after {
    border-width: 38px 30px 45px 0px;
  }
  .point_textarea {
    margin-top: 30px;
  }
  .point_textarea p {
    padding: 30px 30px;
  }
  .point_textarea img {
    width: 40%;
    padding: 0 40px 20px 0;
  }
  .point-fig {
    position: absolute;
    bottom: 1px;
    right: 0;
    font-weight: 500;
  }
}
@media screen and (max-width: 768px){
  .point-item {
    padding: 10px 0 20px;
    margin-bottom: 24px;
  }
  .point-ribbon {
    margin-right: calc(60% + 15px);
  }
  .point01 {
    font-size: 1.5em;
    line-height: 46px;
  }
  .point-ribbon:after,.point-ribbon02:after,.point-ribbon03:after {
    border-width: 32px 16px 32px 0px;
  }
  .point_textarea p {
    padding: 0 16px;
  }
  .point_textarea img {
    width: 45%;
    position: absolute;
    right: 0;
    padding: 0 30px 20px 0;
  }
  .point_img img {
    display: none;
  }
  .point-fig {
    display: none;
  }
}

/*  エスコンモーダル表示
============================================================================= */
#sheetModal {
  display: block;
}
#sheetModal .sheetmodal {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}
#sheetModal .sheetmodal-wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px;
    overflow: auto;
}
#sheetModal .sheetmodal-bg {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
}
#sheetModal .sheetmodal-box {
    width: 100%;
    max-width: 800px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
#sheetModal .sheetmodal-box .inner {
    background: #fff;
    padding: 40px;
    text-align: left;
}
#sheetModal .sheetmodal-box .inner > :first-child {
    margin-top: 0;
}
#sheetModal .sheet-title {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 25px;
    text-align: center;
    line-height: 120%;
    padding-top: 15px;
    padding-bottom: 15px;
}

#sheetModal .sheet-headline {
    font-weight: bold;
    color: #000;
    font-size: 20px;
    text-align: center;
    line-height: 120%;
    padding-top: 15px;
    padding-bottom: 15px;
}
#sheetModal .sheet-bx {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.row:before, .row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
#sheetModal .sheet-bx-img {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
#sheetModal .sheet-bx-img img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#sheetModal .sheetmodal-box .sheetmodal-close {
    background-color: #cc0000;
    padding: 10px;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}
#sheetModal .sheetmodal-wrap:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}
.move-lounge a strong:hover {
    color: #ffb900;
}

@media screen and (min-width: 769px) {
    .row {
        display: flex;
    }
    #sheetModal .sheetmodal-box .sheetmodal-close {
        width: 50%;
        margin: 30px auto 0px;
    }
    .sheet-explanation {
        font-size: 14px;
        text-align: justify;
        line-height: 25px;
        padding: 20px 0 20px 10px;
    }
    .move-lounge {
        padding: 10px 0 0 10px;
        font-size: 1.6rem;
    }
    .move-lounge strong {
        font-size: 2.2rem;
        font-weight: 600;
        color: #ff0000;
    }
}

@media screen and (max-width: 768px) {
    #sheetModal .sheet-bx-img {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    #sheetModal .sheetmodal-box .inner {
        padding: 10px;
    }
    #sheetModal .sheet-headline {
        font-size: 13px;
    }
    #sheetModal .sheet-title {
        font-weight: bold;
        color: #FFFFFF;
        font-size: 15px;
        text-align: center;
        line-height: 120%;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .sheet-explanation {
        font-size: 12px;
        padding: 10px 0;
    }
    .move-lounge {
        font-size: 1.3rem;
        padding: 10px 0 20px;
    }
    .move-lounge strong {
        font-size: 1.4rempx;
        font-weight: 600;
        color: #ff0000;
    }
}

/*  ホテルから選ぶ
============================================================================= */  

.slick-slider{
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
	width: 100%;
}
.slick-list{
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus{
	outline: none;
}
.slick-list.dragging{
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	width: 100%;
	height: 100%;
}
.slick-track{
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.slick-track:before,
.slick-track:after{
	display: table;
	content: '';
}
.slick-track:after{
	clear: both;
}
.slick-loading .slick-track{
	visibility: hidden;
}
.slick-slide{
	display: none;
	float: left;
	height: 100%;
}
[dir='rtl'] .slick-slide{
	float: right;
}
.slick-slide img{
	display: block;
}
.slick-slide.slick-loading img{
	display: none;
}
.slick-slide.dragging img{
	pointer-events: none;
}
.slick-initialized .slick-slide{
	display: block;
}
.slick-loading .slick-slide{
	visibility: hidden;
}
.slick-vertical .slick-slide{
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden{
	display: none;
}

/* Slider */
.slick-loading .slick-list{
    background: #fff url('/_ovs_assets/images/ajax-loader.gif') center center no-repeat;
}

/* Arrow */
.slick-prev, .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 65px;
	display: block;
	width: 50px;
	height: 50px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	z-index: 2;
	background: none;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
	opacity: .25;
}
.slick-prev:before, .slick-next:before {
	font-family: 'kkrs-dp';
	font-size: 3.0rem;
	line-height: 1;
	opacity: .75;
	color: #555;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: '\e902';
}
.slick-prev {
	left: -50px;
    -webkit-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg);
}
.slick-next {
	right: -50px;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
}

/* Dots */
.slick-dotted.slick-slider{
    margin-bottom: 30px;
}
.slick-dots{
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover, .slick-dots li button:focus{
    outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before{
    opacity: 1;
}
.slick-dots li button:before{
    font-size: 0.8rem;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '●';
	font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
    opacity: .75;
    color: black;
}
.slick-dots > li:first-child:last-child {
    display: none;
}


.villa-sect {
    background: #ffff;
    padding: 30px 20px 20px;
    border-radius: .75em;
    margin-bottom: 50px;
    position: relative;
}
.villa-sect::before {
    position: absolute;
    content: "";
    display: inline-block;
    background: url(/kokunai/theme/hkdballpark/images/villa/villa_icon.png) center / 100% auto no-repeat;
    left: -72px;
    top: -9px;
    width: 330px;
    height: 100px;
    z-index: 1;
    transform: rotateZ(-15deg);
}
.s-pic img {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding-top: 5px;
}
.line {
    margin-bottom: 5px;
    font-size: 2rem;
    font-weight: 600;
    border-bottom: solid 2px #b39050;
    color: #b39050;
}

.strong {
    display: block;
    font-weight: 700;
    font-size: 3rem;
}
.point {
    padding: 8px 16px;
    line-height: 1.5;
    background: #f7f4ed;
}
.point__ttl {
    position: relative;
    padding-bottom: 8px;
    text-align: center;
    color: #b39050;
    font-size: 1.6rem;
    font-weight: 700;
}
.point__list {
    counter-reset: item;
    margin-top: 10px;
}
.point__listitem {
    counter-increment: item;
    position: relative;
    padding-left: 2.5rem;
}
.point__listitem::before {
    position: absolute;
    left: 0;
    content: counter(item);
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-family: "Jost", serif;
    border-radius: 50%;
    background: #b39050;
}
.point__listitem:not(:first-child) {
    margin-top: 4px;
}

.bt-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}
.bt-hotel,.bt-jr,.bt-air {
    position: relative;
    width: 100%;
    color: #fff;
    font-weight: 700;
    transition: border-radius .3s;
    margin: 0 5px;
}

.bt-hotel:hover {
    opacity: .8;
}
.bt-jr:hover {
    opacity: .8;
}
.bt-air:hover {
    opacity: .8;
}
p.bt-txt {
    color: #ffff;
}
.osusume-hotel08_title {
    margin-bottom: 40px;
}
.osusume-hotel08_title span {
    font-size: 1.5em;
    font-weight: 800;
    text-shadow: 3px 3px 0px #FFF;
}

.slick-slide figure {
    position: relative;
}
.slick-slide figure figcaption {
    position: absolute;
    bottom: 0;
    right: 3px;
}
p.caption {
    font-weight: bold;
    color: #ffff;
    font-size: 1.1rem;
    text-shadow: 0 1px 0px #000000, 1px 0px 0px #000000, 0px -1px 0px #000000, 1px 1px 1px #000000;
}
.bt-plan .c-btn {
       height: 3.375em;
}


@media screen and (min-width: 769px) {
    .sec-osusume-hotel__column {
        padding-top: 20px;
    }
    .sec-osusume-hotel__column .c-txt {
        flex: 1;
        padding-left: 2em;
    }
    .s-pic {
        width: 35%;
        border-radius: .25em;
        overflow: hidden;
        position: relative;
    }
    .point {
        padding: 16px 24px;
    }
    .point__ttl {
        font-size: 2rem;
    }
    .point__listitem {
        padding-left: 3.3rem;
        text-align: left;
    }
    .point__listitem::before {
        top: 2px;
        width: 2.2rem;
        height: 2.2rem;
        line-height: 2.2rem;
        font-size: 1.4rem;
    }
    .point__listitem {
        padding-left: 3.3rem;
    }
    .p-txt {
        padding: 20px 0;
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    .s-pic img {
       display: block;
       max-width: 100%;
    }
    .bt-plan {
       padding: 20px 0 10px;
    }
    .bt-hotel, .bt-jr, .bt-air {
       width: calc(33% - .25em);
       margin: 0 2px;
       font-weight: 500;
    }
    p.bt-txt {
       font-size: 2.5vw;
    }
    span.dot {
       display: none;
    }
    .villa-sect {
      padding: 40px 20px 20px;
   }
    .villa-sect::before {
       left: -20px;
       top: -23px;
       width: 140px;
       height: 83px;
       z-index: 1;
       transform: rotateZ(-22deg);
   }
   .line {
       font-size: 1.3rem;
   }
   .strong {
       font-size: 1.6em;
   }
   .point__ttl {
       padding: 5px;
       font-size: 1.5rem;
   }
   .point__list {
       counter-reset: item;
       margin-top: 10px;
       text-align: left;
   }
   .point__listitem {
       counter-increment: item;
       position: relative;
       padding-left: 2rem;
   }
   .point__listitem:not(:first-child) {
       margin-top: 10px;
   }
   .point__listitem::before {
       left: -5px;
       padding: 0 6px;
   }
   .osusume-hotel08_title span {
      text-shadow: 2px 2px 0px #FFF;
   }
}


/*  エスコン魅力
============================================================================= */
.escon-txt {
    margin: 50px 15px;
    border-radius: 10px;
    border: 5px solid #1b67b7;
    padding: 50px;
    background-image: url(/kokunai/theme/hkdballpark/images/escon_back.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-weight: 600;
}
.slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60px;
}
.slider-container {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
}
.slider-container::-webkit-scrollbar {
  display: none;
}
.escon_facility {
  display: flex;
  list-style: none;
  padding: 0;
  padding-left: calc((100% - (3 * (33.333% - 30px) + 2 * 30px)) / 2);
  padding-right: calc((100% - (3 * (33.333% - 30px) + 2 * 30px)) / 2);
}
.facility__listitem {
  flex: 0 0 calc(33.333% - 30px);
  margin-right: 20px;
  scroll-snap-align: start;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.escon_facility .facility__listitem:last-child {
  margin-right: 0;
}

.facility__listitem dl{
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.facility__listitem figure {
  margin: 0 0 10px 0;
  text-align: center;
}

.facility__listitem figure img  {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 4px;
}

.facility__listitem figcaption {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
  text-align: right;
}

.facility__listitem dt {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 1.4em;
}

.facility__item-detail {
  flex-grow: 1;
}

.facility__item-lead  {
  font-size: 0.9em;
  color: #333;
  line-height: 1.5;
}
.slider-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 20%;
  justify-content: center;
}

.slider-arrow {
  position: static;
  background-color: #004a51;
  color: white;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  flex-shrink: 0;
}

.slider-arrow:hover:not(:disabled) {
  background-color: #005588;
}

.slider-arrow:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  cursor: not-allowed;
  opacity: 0.7;
}
.slider-indicators {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-grow: 1;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.indicator-dot.active {
  background-color: #004a51;
  width: 12px;
  height: 12px;
}

@media screen and (min-width: 769px) { 
  .escon_facility {
    margin: 0 0 40px 0;
  }
}

@media screen and (max-width: 768px) { 
  .facility__listitem {
    flex: 0 0 calc(100% - 20px);
    margin: 20px 5px;
  }
  .facility__listitem figure img {
    height: 200px;
  }
  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .slider-controls {
    gap: 5px;
  }
  .escon-txt {
    margin: 10px 15px;
    padding: 15px;
   }
  .sec-osusume-hotel__column .p-txt {
    margin: 40px 0px 20px;
   }
}

.access {
    margin: 100px 0px 30px;
}
.access_map img {
    width: 70%;
}
.access_box {
    display: flex;
    justify-content: space-around;
}
.access_title {
    font-size: 1.4em;
    font-weight: 600;
    margin: 10px 0 20px;
}
.access_title:before {
    font-family: 'Material Icons Round';
    position: relative;
    top: 3px;
    right: 5px;
}
.access_title.-train:before {
    content: "\e570";
}
.access_title.-bus:before {
    content: "\e530";
}
.access_title.-car:before {
    content: "\e531";
}
.access_txt dd {
    margin-top: 5px;
}
.box {
    background-color: #fff;
    margin: 5px;
    padding: 20px 20px 50px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}
.box:before {
    position: absolute;
    left: 10px;
    top: 10px;
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    border-top: dashed 3px;
    border-left: dashed 3px;
    color: #9e7474;
}
.box:after {
    position: absolute;
    right: 10px;
    bottom: 10px;
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    border-right: dashed 3px;
    border-bottom: dashed 3px;
    color: #9e7474;
}
.box dl {
    text-align: left;
}
dt.strong-title {
    font-size: 1.1em;
    font-weight: 600;
    background-color: #004466;
    color: #fff;
    text-align: center;
    line-height: 2;
}
dt.strong-title:not(:first-child) {
    margin-top: 20px;
}
.box p {
    margin-top: 20px;
}
@media screen and (min-width: 769px) { 
   .box {
      width: calc(100% / 3);
   }
   #train-hidden-content {
      display: block !important;
      max-height: none !important;
      opacity: 1 !important;
    }
   #additional-access-content {
      display: contents!important;
    }
   .show-more-button, .reset-button {
      display: none !important;
    }
}

@media screen and (max-width: 768px) { 
   .access {
      margin: 20px 0;
   }
   .access_box {
      flex-direction: column;
   }
   .access_map img {
      width: 100%;
   }
   .box {
      padding: 20px 20px 30px;
    }
   #train-hidden-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
   }
   #train-hidden-content.is-expanded {
      max-height: 1000px;
      opacity: 1;
    }
   #additional-access-content {
      display: none;
    }
    .show-more-button, .reset-button {
      display: block;
      margin: 15px auto 0;
      padding: 10px 20px;
      background-color: #004a51;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
    }
    .reset-button {
      background-color: #6c757d;
      display: none;
    }
}

/*  すべてのプラン
============================================================================= */
.allplan_btn {
    align-items: center;
}
.plan_btn {
    line-height: 3.5;
    align-items: center;
    background-color: #004a51;
    border-radius: .375em;
    margin: 0 10px;
    position: relative;
}
.allbtn_txt:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "\e5e1";
    font-size: .75em;
    right: 2em;
    font-family: 'Material Icons Round';
}
.catalogbtn_txt:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "\e5e1";
    font-size: .75em;
    right: 2em;
    font-family: 'Material Icons Round';
}
.allbtn_txt {
    color: #fff;
}
.catalogbtn_txt {
    color: #fff;
}
.plan_btn:hover {
    opacity: .8;
    transition: all .3s ease;
}
.catalog_btn:hover {
    opacity: .8;
    transition: all .3s ease;
}

@media screen and (min-width: 769px) { 
    section#allplan {
        padding-top: 100px;
    }
    .allplan_btn {
        display: flex;
        justify-content: space-around;
        margin-top: 50px;
    }
    .plan_btn {
        width: calc(100% / 3);
    }
    .catalog_btn_link {
        display: block;
        width: 50%;
        margin: 30px auto 0;
        text-decoration: none;
        color: inherit;
    }
    .catalog_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #cc0d21;
        border-radius: .375em;
        position: relative;
        line-height: 3.5;
        height: 100%;
        cursor: pointer;
        box-sizing: border-box;
    }
    .catalog_btn_link {
        display: block;
        width: 50%;
        margin: 30px auto 0;
        text-decoration: none;
        color: inherit;
    }
}
    
@media screen and (max-width: 768px) { 
    section#allplan {
        padding-top: 50px;
    }
    .allplan_btn {
        margin-top: 20px;
    }
    .plan_btn {
        line-height: 4;
        margin: 10px;
    }
    .catalog_btn {
       line-height: 4;
       background-color: #cc0d21;
       border-radius: .375em;
       margin: 10px 10px 0;
       position: relative;
    }
}

/*  周辺観光
============================================================================= */
@media screen and (min-width: 769px) {
.spot-sect__inner {
    position: relative;
    margin: 50px auto 0;
    padding: 0 5px;
    width: 100%;
    min-width: 970px;
    max-width: 1246px;
}
.area-ticket-place {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}
.ticket__listitem {
    width: calc((100% - 40px) / 6);
    margin: 10px 5px;
    border: solid 1px #ccc;
    background: #fff;
}
.area-ticket-place figure img {
    width: 100%;
    height: 150px;
    padding: 5px;
}
.area-spotlist-inner-place-ticket dt {
    text-align: left;
    margin-left: 5px;
    font-size: small;
    margin-bottom: 5px;
}
.kw-sect__inner {
    position: relative;
    margin: 50px auto 0;
    padding: 0 5px;
    width: 100%;
    min-width: 970px;
    max-width: 1246px;
}
.kw-sect__cassette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.kw-sect__cassette a {
    display: inline-block;
    margin: 0 .1em .6em .6em;
    padding: .8em;
    line-height: 1;
    text-decoration: none;
    color: #323743;
    background-color: #fff;
    border: 1px solid #BCBDC2;
    border-radius: 2em;
}
.kw-sect__cassette a:before {
    content: "#";
    color: #2490D8;
    margin-right: 0.2em;
}
.feature-sect__more {
    padding: 28px 92.703px 0px 92.703px;
}
.ticket__listitem:hover {
    opacity: .6;
    transition: 0.3s;
}
.kw-sect__cassette a:hover {
    background-color: #1b67b7;
    color: #fff;
}
}

@media screen and (max-width: 768px) {
  .spot-sect__inner {
    margin-top: 20px;
    width: 100%;
    overflow-x: scroll;
  }
  .area-ticket-place {
    display: flex;
    justify-content: space-between;
    width: 1000px;
  }
  .area-ticket-place > li {
    position: relative;
    padding: 10px 5px 10px 5px;
    width: 170px;
    margin-right: 3px;
   }
  .ticket__listitem {
    border: solid 1px #ccc;
    background: #fff;
   }
  .contents-wraper img {
    max-width: 100%;
   }
  .area-ticket-place img {
    vertical-align: bottom;
    min-height: 130px;
    object-fit: cover;
   }
  .area-ticket-place dt {
    margin-top: 3px;
    font-size: 1.3rem;
    font-weight: normal;
   }
  .kw-sect__cassette {
    margin-top: 20px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
   }
  .kw-sect__inner a {
    display: inline-block;
    margin: 0 .1em .6em .1em;
    padding: .8em;
    line-height: 1;
    text-decoration: none;
    color: #323743;
    background-color: #fff;
    border: 1px solid #BCBDC2;
    border-radius: 2em;
   }
  .kw-sect__inner a:before {
    content: "#";
    color: #2490D8;
    margin-right: 0.2em;
   }
  .feature-sect__more {
    margin-top: 20px;
   }
}
  


/*  調整
============================================================================= */
.ly_grid {
   display: flex;
   justify-content: center;
}
.c-bnr__item a:hover {
    opacity: .6;
}
@media screen and (min-width: 769px) {
    .ly_grid.-recommend .ly_grid__item {
        width: calc(33.33333% - 0px);
    }
    .ly_grid .ly_grid__item {
        margin-left: 0 !important;
    }
}
@media screen and (max-width: 768px) {
    .ly_grid__item:nth-child(1), .ly_grid__item:nth-child(2), .ly_grid__item:nth-child(3), .ly_grid__item:nth-child(4), .ly_grid__item:nth-child(5) {
        margin-right: 0;
    }
    .ly_grid .ly_grid__item {
        margin: 0;
    }
}