@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
[v-cloak] {
  display: none;
}
.banner {
  height: 80vh;
}
.t-24 {
  font-size: 24px;
}
.tabs {
  position: sticky;
  z-index: 10;
}
.tabs .bottom {
  background-color: #f7f7f7;
}
.tabs .bottom ul {
  list-style: none;
  font-size: 0.8rem;
}
.tabs .bottom ul li .col-4:after {
  content: "";
  display: block;
  width: 110%;
  height: 3px;
  background-color: #000;
  border-radius: 6px;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transition: all 1s;
}
.tabs .bottom ul li:hover span:after {
  transform: translateX(-50%) scaleX(1);
}
.tabs .bottom ul .active {
  font-weight: 600;
}
.tabs .bottom ul .active span:after {
  transform: translateX(-50%) scaleX(1);
}
.el-image > img {
  width: 100%;
  height: 100%;
}
.isoneLine {
  height: 1.5em !important;
  overflow: hidden !important;
}
.isonemobLine {
  height: 4.2em !important;
  overflow: hidden !important;
}
.tour-description {
  height: 63px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}
.textline-clamp {
  height: 210px;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}
.textline-clampnone {
  display: block;
  line-height: 1.5;
  height: 100%;
  overflow: visible;
}
.ellipsis-text {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
.dections button:hover,
.dections button.active {
  background-color: #0d1c34 !important;
  color: #fff;
}
.after {
  position: relative;
}
.after:after {
  content: "";
  display: block;
  width: 100%;
  height: 60%;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
#pills-trip .top .left {
  box-sizing: border-box;
  background-color: #2b3d52;
  color: #fff;
}
#pills-trip .top .left .map-date {
  width: 18%;
}
#pills-trip .top .left .map-city {
  width: 27%;
}
#pills-trip .top .left .map-trip {
  width: 55%;
}
#pills-trip .top .left .describe {
  flex: 1;
  position: relative;
}
#pills-trip .top .left .describe:after {
  content: "";
  display: block;
  width: 94%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#pills-trip .top .left .describe:last-child:after {
  display: none;
}
#pills-trip .top .left .active {
  background-color: #f0f0f0 !important;
}
#pills-trip .bottom .left .detail {
  background-color: #2b3d52;
  color: #fff;
}
@media (min-width: 960px) {
  .w-md-custem {
    width: 95%;
  }
  .tabs-top-header-true {
    top: 70px;
  }
  .tabs-top-header-false {
    top: 70px;
  }
  #pills-trip .map-scroll {
    max-height: 285px;
    overflow-y: auto;
  }
  #pills-trip .map-scroll::-webkit-scrollbar {
    width: 5px;
  }
  #pills-trip .map-scroll::-webkit-scrollbar-track {
    background: #eee;
  }
  #pills-trip .map-scroll::-webkit-scrollbar-thumb {
    background: #aaa;
  }
}
@media (max-width: 960px) {
  .w-md-custem {
    width: 100%;
  }
  .tabs {
    top: 47px;
  }
  #pills-trip .top .left .map {
    overflow-x: auto;
  }
  #pills-trip .top .left .map .has {
    width: fit-content;
  }
  #pills-trip .top .left .map .has .map-date {
    width: 30vw;
  }
  #pills-trip .top .left .map .has .map-city {
    width: 52vw;
  }
  #pills-trip .top .left .map .has .map-trip {
    width: 100vw;
  }
  .col-mob-0 {
    width: 0 !important;
    display: none;
  }
  .col-mob-12 {
    width: 100% !important;
  }
}
.en .d-en-block {
  display: block !important;
}
.en .d-en-inlineblock {
  display: inline-block;
}
.en .common-button > div {
  width: 124px;
  font-size: 0.9rem !important;
  text-align: center;
}
.en .en-none {
  display: none !important;
}
.en .d-en-none {
  display: none !important;
}
.en .mx-area {
  margin-left: 0 !important;
}
.en .primary-header {
  background-color: #142640 !important;
  height: 6.5rem;
}
.en .btn-cruise {
  font-size: 14px;
  width: 50px;
  height: 29px;
  text-align: center;
  line-height: 29px;
  border: 1px solid #ffffff;
  color: #fff !important;
}
.en .btn-maincruise {
  width: 100%;
  height: 1.5rem;
  font-size: 0.9rem;
}
.ja .common-button > div {
  width: 221px;
  text-align: center;
}
.ja .ja-font-12 {
  font-size: 12px !important;
}
@media (min-width: 992px) {
  .ja .ja-col-lg-5 {
    flex: 0 0 auto;
    width: 55.666667% !important;
  }
}
@media (max-width: 960px) {
  #pills-trip .top .right .map .has .map-city {
    width: 25vw !important;
  }
}
.zh .common-button > div {
  width: 164px;
  text-align: center;
}
.tw .common-button > div {
  width: 140px;
  text-align: center;
}
.zh .d-en-flex,
.ja .d-en-flex,
.tw .d-en-flex {
  display: flex;
}
.zh .d-en-none,
.ja .d-en-none,
.tw .d-en-none {
  display: block;
}
@media (max-width: 992px) {
  .is-mt-2 {
    margin-top: 0.5rem !important;
  }
}
.ml-n2 {
  margin-left: -1.75rem;
}
.dbdtip {
  color: #333;
  padding-left: 5.1rem;
}
@media (max-width: 768px) {
  .dbdtip {
    color: #333;
    padding-left: 3.4rem;
  }
  .mt-mob-pc {
    margin-top: 0.75rem !important;
  }
}
@media (min-width: 962px) {
  .mt-mob-pc {
    margin-top: 1rem !important;
  }
}
.mb-day-num {
  color: #142640;
  font-size: 24px;
}
.mt-15vh {
  margin-top: 15vh;
}
.font-color-3 {
  color: #333;
}
.bg-color {
  background-color: #142640;
}
.work-all {
  word-break: break-all;
}
.offcanvas-backdrop {
  z-index: 10 !important;
}
/* ==========================================================================
   Single cruise page -- type scale
   --------------------------------------------------------------------------
   The page had accumulated eight distinct sizes on mobile (10, 13, 14, 15, 16,
   18, 21, 24) set through a mix of inline styles and t-* utilities, which is
   what made the itinerary read as oversized next to everything else. Five
   steps now, one purpose each:

                                                  Mobile   Desktop
     Display   cruise title                         21px      31px
     Heading   旅程 / ハイライト / overview lede      18px      24px
     Sub       port name, card title                16px      18px
     Body      descriptions                         15px      16px
     Note      duration, footnotes, dates           13px      14px

   Mobile-first; the 768px breakpoint matches the d-md-* utilities the
   template already switches on. Line-height is 1.7 for body in the itinerary
   and card sections; the overview box runs tighter at 1.3 -- see its own
   block below.
   ========================================================================== */

.vk-section-head {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.vk-section-head__note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 4px;
}

.vk-port-title,
.vk-card-title {
  font-size: 16px;
  line-height: 1.5;
}

.vk-port-desc,
.vk-card-body {
  font-size: 15px;
  line-height: 1.7;
}

.vk-note {
  font-size: 13px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .vk-section-head {
    font-size: 24px;
  }

  .vk-section-head__note {
    font-size: 14px;
  }

  .vk-port-title,
  .vk-card-title {
    font-size: 18px;
  }

  .vk-port-desc,
  .vk-card-body {
    font-size: 16px;
  }

  .vk-note {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Itinerary rows
   --------------------------------------------------------------------------
   Only rows whose day has description copy behave as links. Cursor lives here
   rather than in an inline style so the two states stay together; the click
   handler and the "詳細はこちら" label are gated in the template with the same
   has_itinerary_detail() test.
   -------------------------------------------------------------------------- */
.vk-day-row--linked {
  cursor: pointer;
}

.vk-day-row--linked:focus-visible {
  outline: 2px solid #44687d;
  outline-offset: -2px;
}

/* Hides the "詳細はこちら" label and its arrow on days that have no detail
   page, without collapsing the column they sit in -- the rows above and below
   keep their alignment. visibility (rather than display) is also what survives
   Bootstrap's .d-md-block{display:block!important}, which silently overrides
   the inline display:none that v-show would set. */
.vk-invisible {
  visibility: hidden;
}

/* ==========================================================================
   Cruise overview copy -- the #2b3d52 box under the title bar
   --------------------------------------------------------------------------
   The box is #pills-trip .top .left; its contents come from the API `detail`
   field via v-html, so the inner markup cannot be classed from PHP. JS tags
   the pieces instead (scripts/single-cruise-ocean.js):

     .cruise-detail-lede   first block in the box -- the cruise headline
     .cruise-detail-dates  trailing "-- 出発日: ... --" line, when present

   The same script strips font-size / line-height / font-weight / text-align
   off the API markup first. That content ships with its own typography, which
   beats any non-!important rule here -- before stripping, the headline
   rendered 24px at both breakpoints no matter what these rules asked for.
   With it gone, the scale above is authoritative without needing !important.

   The ID prefix beats Bootstrap's responsive headings -- h2 resolves to
   calc(1.325rem + .9vw), ~24.6px on a 375px viewport, which is what made the
   headline outrun the cruise title in the first place.

   Leading here is deliberately tighter than the rest of the page: 1.3 rather
   than 1.7, per the approved comp. The space taken out of the lines is put
   back between the blocks (headline margin and the gap above the sailing
   dates both grow), so the box reads as three tight units with air around
   them instead of one evenly-spaced slab.
   ========================================================================== */

/* ---- Mobile (the element itself is d-md-none) ---------------------------- */
#pills-trip .top .left .cruise-detail-copy--mob {
  text-align: left;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

#pills-trip .top .left .cruise-detail-copy--mob p,
#pills-trip .top .left .cruise-detail-copy--mob div,
#pills-trip .top .left .cruise-detail-copy--mob li {
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  margin: 0 0 1.6em;
}

/* Headline sits at the Heading step, same as 旅程. .cruise-detail-lede is
   added by JS; the h1-h6 fallback keeps this correct if the script is blocked
   or the detail field is re-authored with a different tag. */
#pills-trip .top .left .cruise-detail-copy--mob .cruise-detail-lede,
#pills-trip .top .left .cruise-detail-copy--mob h1,
#pills-trip .top .left .cruise-detail-copy--mob h2,
#pills-trip .top .left .cruise-detail-copy--mob h3,
#pills-trip .top .left .cruise-detail-copy--mob h4,
#pills-trip .top .left .cruise-detail-copy--mob h5,
#pills-trip .top .left .cruise-detail-copy--mob h6 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: left;
  margin: 0 0 22px;
}

/* Departure dates: Note step, and the only line that stays centred -- the
   em-dash rules on either side are drawn as part of the string. */
#pills-trip .top .left .cruise-detail-copy--mob .cruise-detail-dates {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  color: #c3ceda;
  text-align: center;
  margin: 34px 0 0;
}

/* ---- Desktop (d-none d-md-block, so no media query needed) --------------- */
#pills-trip .top .left .cruise-detail-copy--pc {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

#pills-trip .top .left .cruise-detail-copy--pc p,
#pills-trip .top .left .cruise-detail-copy--pc div,
#pills-trip .top .left .cruise-detail-copy--pc li {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 1.6em;
}

#pills-trip .top .left .cruise-detail-copy--pc .cruise-detail-lede,
#pills-trip .top .left .cruise-detail-copy--pc h1,
#pills-trip .top .left .cruise-detail-copy--pc h2,
#pills-trip .top .left .cruise-detail-copy--pc h3,
#pills-trip .top .left .cruise-detail-copy--pc h4,
#pills-trip .top .left .cruise-detail-copy--pc h5,
#pills-trip .top .left .cruise-detail-copy--pc h6 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}

#pills-trip .top .left .cruise-detail-copy--pc .cruise-detail-dates {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #c3ceda;
  margin: 44px 0 0;
}

/* --------------------------------------------------------------------------
   Japanese line breaking
   --------------------------------------------------------------------------
   Applies to the cruise title in the navy bar (.cruise-title-line) and to the
   overview headline (.cruise-detail-lede).

   Baseline for every browser: no character-level breaking mid-word, and strict
   rules for the characters that may not start or end a line (、。ー っ and
   friends). This alone stops 伊勢志摩 splitting after 志.

   BudouX then inserts U+200B at phrase (文節) boundaries and adds
   .budoux-applied, which switches to keep-all so those zero-width spaces
   become the ONLY legal break points. Without keep-all they are ignored,
   because character-level breaking is already permitted everywhere.

   If the module fails to load, the baseline below still wraps correctly.
   -------------------------------------------------------------------------- */
.cruise-title-line,
.cruise-detail-copy .cruise-detail-lede,
.cruise-detail-copy h1,
.cruise-detail-copy h2,
.cruise-detail-copy h3,
.cruise-detail-copy h4,
.cruise-detail-copy h5,
.cruise-detail-copy h6 {
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}

/* This stylesheet only loads on the single cruise page, so the unscoped
   selector is safe and covers both the title bar and the overview box. */
.budoux-applied {
  word-break: keep-all;
  line-break: strict;
}

/*# sourceMappingURL=single-cruise-ocean.css.map */