/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:600,700&display=swap&subset=japanese");
@import url(scss/ress.min.css);
/*
common
---------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #231815; }

p,
li,
small {
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  color: #231815; }

strong {
  color: #E60023;
  font-weight: 700; }

a {
  text-decoration: underline; }
  a:hover {
    text-decoration: none; }
    a:hover img {
      opacity: .5; }

.br-tablet {
  display: none; }
  @media only screen and (min-width: 768px) {
    .br-tablet {
      display: block; } }

.br-mobile {
  display: block; }
  @media only screen and (min-width: 768px) {
    .br-mobile {
      display: none; } }

.caption {
  text-align: right;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 12px;
  font-size: 0.75rem; }

/*
Layout
---------- */
.page-header {
  margin: 0;
  padding: 70px 0 30px 0; }

main h2, main h3, .detail h4, .detail h5, .detail .sunset .price dt {
  width: 100%;
  margin: 0 auto 20px auto;
  padding: 5px 10px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700; }

main {
  margin: 0;
  padding: 0 0 70px 0; }
  main h2 {
    font-size: 18px;
    font-size: 1.125rem;
    color: white;
    background-color: #26468E; }
  main h3 {
    font-size: 14px;
    font-size: 0.875rem;
    color: black;
    background-color: #FFF100; }

.container {
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  max-width: 980px; }

/*
Header
---------- */
.site-header {
  position: fixed;
  width: 100%;
  height: 70px;
  padding: 10px 0;
  background-color: #26468E;
  z-index: 10; }
  .site-header .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .site-header .site-name {
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
    font-size: 0.875rem;
    color: white; }
  .site-header .umi_no_kyoto {
    width: auto;
    max-height: 100%; }

/* overwrite from drawer.js */
.global-nav.drawer-nav .drawer-menu li {
  padding: 20px 20px; }

.site-header .drawer-hamburger {
  position: relative; }
.site-header .drawer-hamburger-icon,
.site-header .drawer-hamburger-icon:after,
.site-header .drawer-hamburger-icon:before {
  background-color: white; }

/* overwrite from Luminous.js */
.lum-lightbox {
  top: 90px; }

/*
Page Title
---------- */
.page-header {
  width: 100%;
  height: 170px;
  padding: 70px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("img/pagetitle-back.png") no-repeat center top;
  background-size: cover; }
  @media only screen and (min-width: 768px) {
    .page-header {
      height: 270px; } }
  .page-header h2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 28px;
    font-size: 1.75rem;
    color: white;
    text-shadow: 2px 2px 2px black; }
    @media only screen and (min-width: 768px) {
      .page-header h2 {
        font-size: 40px;
        font-size: 2.5rem; } }

/*
Links
---------- */
.links {
  margin-top: 70px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .links a {
    flex-basis: 300px;
    text-decoration: none; }
    .links a.reserve {
      flex-basis: 400px; }
      @media only screen and (min-width: 768px) {
        .links a.reserve {
          margin: 0 calc(50% - 200px); } }
  .links button {
    margin: 20px auto;
    width: 280px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #335fc2;
    border-radius: 12px; }
    .links button p {
      text-align: center;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      line-height: 1.5;
      font-size: 18px;
      font-size: 1.125rem;
      color: white; }
      .links button p span {
        display: block;
        font-weight: 400;
        font-size: 14px;
        font-size: 0.875rem; }
  .links .reserve button {
    width: 100%;
    height: 50px;
    background-color: #E85050; }

/*
Contents
---------- */
.important-news {
  margin-top: 25px;
  margin-bottom: 50px;
  padding: .5em;
  border: 1px solid #E60023; }
  .important-news h2 {
    text-align: center;
    background-color: #E60023; }

/*
Footer
---------- */
.site-footer {
  padding: 40px 0 30px 0;
  background-color: #E60023; }
  .site-footer h2, .site-footer h3, .site-footer p, .site-footer li, .site-footer small {
    color: white; }
  .site-footer h2 {
    padding: 4px 10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    font-size: 1.125rem;
    border-bottom: 1px solid white; }
  .site-footer p {
    margin: 1em 10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    font-size: 0.9375rem; }
  .site-footer a {
    color: white; }
    .site-footer a:hover {
      color: black; }
  .site-footer .site-footer-inner {
    width: 350px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media only screen and (min-width: 768px) {
      .site-footer .site-footer-inner {
        width: calc(100% - 30px);
        max-width: 960px; } }
  .site-footer .footer-profile {
    margin-bottom: 30px; }
  .site-footer .sns-button > * {
    vertical-align: bottom; }
  .site-footer .copyright {
    display: block;
    margin-top: 50px;
    text-align: center;
    font-size: 13px;
    font-size: 0.8125rem; }

/*
Index Page
---------- */
.home {
  /* ----- main-image */
  /* ----- registered-ships */ }
  .home .page-header {
    display: none; }
  .home .main-image {
    width: 100%;
    height: 670px;
    margin: 0 auto 20px auto;
    padding: 70px 0 0 0;
    background: url("img/main-image.jpg") no-repeat center 70px;
    background-size: 100%; }
    @media only screen and (min-width: 768px) {
      .home .main-image {
        height: 1085px;
        background-size: cover; } }
    .home .main-image .main-title {
      position: absolute;
      top: 20px;
      left: 0;
      max-width: 100%; }
      @media only screen and (min-width: 768px) {
        .home .main-image .main-title {
          left: 15px;
          max-width: calc(100% - 30px); } }
    .home .main-image .subtitle {
      position: absolute;
      top: 158px;
      right: 5px;
      max-width: 55%; }
      @media only screen and (min-width: 768px) {
        .home .main-image .subtitle {
          top: 45px;
          right: 15px; } }
      @media only screen and (min-width: 960px) {
        .home .main-image .subtitle {
          top: 45px;
          right: 100px; } }
    .home .main-image .ship {
      position: absolute;
      top: 320px;
      left: 50%;
      transform: translateX(-50%);
      max-width: calc(100% - 30px); }
      @media only screen and (min-width: 768px) {
        .home .main-image .ship {
          top: 760px;
          left: 40px;
          transform: none; } }
      @media only screen and (min-width: 960px) {
        .home .main-image .ship {
          top: 760px;
          left: 110px;
          transform: none; } }
    .home .main-image .new-ship {
      position: absolute;
      top: 300px;
      right: 20px;
      max-width: 86%; }
      @media only screen and (min-width: 768px) {
        .home .main-image .new-ship {
          right: 32px; } }
    .home .main-image .air_conditioning {
      position: absolute;
      top: 490px;
      left: 15px;
      width: 165px;
      height: auto; }
      @media only screen and (min-width: 768px) {
        .home .main-image .air_conditioning {
          top: 810px;
          left: auto;
          right: 15px;
          width: auto; } }
      @media only screen and (min-width: 960px) {
        .home .main-image .air_conditioning {
          top: 810px;
          left: auto;
          right: 80px;
          width: auto; } }
  .home .registered-ships {
    margin-bottom: 50px; }
    .home .registered-ships ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      list-style: none; }
    .home .registered-ships li {
      flex-basis: 140px;
      font-size: 14px;
      font-size: 0.875rem; }
      .home .registered-ships li.spacer {
        height: 0; }
  .home .inside-view {
    margin-bottom: 50px; }
    .home .inside-view ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      list-style: none; }
    .home .inside-view li {
      flex-basis: 49%; }
      @media only screen and (min-width: 768px) {
        .home .inside-view li {
          flex-basis: auto; } }
      .home .inside-view li img {
        max-width: 100%;
        height: auto; }
  .home .cruise-map img {
    width: 100%; }
  .home .cruise-map .group {
    margin-top: 15px;
    padding: 10px 15px;
    border: 1px dotted #231815; }
    .home .cruise-map .group h3 {
      margin: 0;
      font-weight: 500;
      font-size: 18px;
      font-size: 1.125rem;
      color: #26468E;
      background-color: transparent; }

/*
Detail Page
---------- */
.detail section {
  margin-bottom: 20px; }
.detail h2, .detail h3 {
  margin-top: 20px;
  margin-bottom: 10px; }
.detail h2 + h3 {
  margin-top: 0; }
.detail h4 {
  margin-bottom: 4px;
  font-size: 14px;
  font-size: 0.875rem;
  color: #E60023; }
  .detail h4 span {
    display: inline-block;
    margin-left: 1em;
    font-weight: 400;
    color: #231815; }
.detail h5 {
  margin: 0 .5em 0 0;
  display: inline-block;
  width: 40px;
  height: 20px;
  text-align: center;
  line-height: 10px;
  color: white;
  background-color: #595757; }
.detail p {
  margin-left: 10px; }
.detail em {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  font-size: 1rem; }
.detail .notice {
  margin-bottom: 10px;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 14px;
  font-size: 0.875rem; }
.detail .price ul {
  display: block; }
.detail .price li {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 28px;
  font-size: 1.75rem;
  vertical-align: bottom; }
  .detail .price li span {
    font-size: 20px;
    font-size: 1.25rem; }
  .detail .price li h5 {
    width: 120px;
    height: auto;
    min-height: 28px;
    padding-top: 4px;
    padding-bottom: 8px;
    line-height: 1.2;
    font-size: 20px;
    font-size: 1.25rem; }
    .detail .price li h5 span {
      display: block;
      font-size: 14px;
      font-size: 0.875rem; }
.detail .service {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* departure */
  /* ticket */
  /* rootmap */ }
  .detail .service .column {
    flex-basis: 460px;
    max-width: 100%; }
    .detail .service .column img {
      max-width: 100%;
      height: auto; }
  .detail .service .departure ul {
    margin-bottom: 14px;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    list-style: none; }
  .detail .service .departure li {
    flex-basis: 108px;
    margin-bottom: 10px;
    font-size: 14px;
    font-size: 0.875rem; }
  .detail .service .ticket {
    overflow: hidden; }
    .detail .service .ticket .signboard {
      float: right; }
  .detail .service .rootmap {
    margin: 15px 0; }
.detail .calendar ul {
  list-style: none; }
.detail .calendar li {
  width: 100%; }
  @media only screen and (min-width: 768px) {
    .detail .calendar li {
      width: auto; } }
.detail .calendar .usage .weekday-mark {
  color: #FFF98A; }
.detail .calendar .usage .holiday-mark {
  color: #FFC4F7; }
.detail .calendar .service-calendar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
.detail .calendar table {
  margin: 15px auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  border-collapse: collapse; }
  .detail .calendar table caption {
    font-weight: 700;
    font-size: 16px;
    font-size: 1rem; }
  .detail .calendar table th {
    text-align: center;
    font-size: 14px;
    font-size: 0.875rem; }
  .detail .calendar table td {
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    font-size: 1.25rem;
    color: #231815;
    border: 1px solid #707070;
    background-color: white; }
    .detail .calendar table td.weekday {
      background-color: #FFF98A; }
    .detail .calendar table td.holiday {
      color: #E60023;
      background-color: #FFC4F7; }
    .detail .calendar table td.sat {
      color: #26468E; }
    .detail .calendar table td.ordinary {
      color: #231815; }
.detail .sunset {
  margin-top: 20px;
  padding: 10px;
  background-color: #fcddcc; }
  .detail .sunset h2 {
    background-color: #ee5500; }
  .detail .sunset .description h2 {
    margin-top: 0; }
  .detail .sunset p {
    margin-bottom: 10px; }
  .detail .sunset .departure ul {
    margin: 14px 10px;
    padding-left: 21px; }
  .detail .sunset .price dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
  .detail .sunset .price dt, .detail .sunset .price dd {
    border: 1px solid #595757; }
  .detail .sunset .price dt {
    width: 100%;
    margin: 0;
    color: white;
    background-color: #595757; }
    @media only screen and (min-width: 768px) {
      .detail .sunset .price dt {
        width: auto; } }
  .detail .sunset .price dd {
    width: 100%;
    padding: 5px 10px; }
    @media only screen and (min-width: 768px) {
      .detail .sunset .price dd {
        width: auto; } }