/**** general styles ***/
#layout-content {
  display: none; }

.row.small-gutter {
  margin-left: -5px;
  margin-right: -5px; }

.small-gutter [class*='col-'] {
  padding-right: 5px;
  padding-left: 5px; }

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/*.container--jal h1,
.container--jal h2,
.container--jal h3 {
  font-family: "Montserrat", "source sans pro", sans-serif;
}*/

@media screen and (min-width: 1200px) {
  .container--jal {
    width: 1126px !important;
  }
}

/****** hero *******/
.hero-hokkaido {
  font-family: "Montserrat", "source sans pro", sans-serif;
  height: calc(100vh - 325px);
  min-height: 60rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.4) 100%), url("https://en.japantravel.com/static/css/feature/../img/jal-hokkaido-hero.png");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: table;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.hero-hokkaido__content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.hero-hokkaido__title {
  font-style: normal;
  font-weight: bold;
  line-height: 1.12;
  font-size: 2.8rem;
  margin: 0;
}

.hero-hokkaido__subtitle {
  margin-top: 2rem;
  font-size: 2.4rem;
  line-height: 1.5;
  margin: auto;
  position: relative;
}

@media (min-width: 768px) {
  .hero-hokkaido__title {
    font-size: 4.8rem;
  }
}

@media (max-width: 431px) {
  .hero-hokkaido__subtitle > span {
    display: block;
    padding: 0 3.2rem;
  }

  .hero-hokkaido__subtitle::before,
  .hero-hokkaido__subtitle::after {
    position: absolute;
    display: inline-block;
    content: "";
    border: 1px solid #FFFFFF;
    width: 2.5rem;  
  }

  .hero-hokkaido__subtitle::before {
    top: 50%;
    left: 0;
  }

  .hero-hokkaido__subtitle::after {    
    right: 0;    
    top: 50%;
  }
}

@media (min-width: 432px) {
  .hero-hokkaido__subtitle::before,
  .hero-hokkaido__subtitle::after {
    display: inline-block;
    content: "";
    border: 2px solid #FFFFFF;
    transform: rotate(-180deg);
    width: 4rem;
    margin: 0.5rem 1rem;
  }
}

.hero-hokkaido__map {
  position: absolute;
  font-size: 1.6rem;
  bottom: 1.6rem;
  right: 1.6rem;
  color: #fff;
}

.hero-hokkaido__map:hover,
.hero-hokkaido__map:focus {
  color: #fff;
}

.hero-hokkaido__map-icon {
  margin-right: .8rem;
}

@media (min-width: 992px) {
  .hero-hokkaido__map {
    right: calc(50% - 485px + 15px);
    bottom: 1.8rem;
  }
}

@media (min-width: 1200px) {
  .hero-hokkaido__map {
    right: calc(50% - 563px + 15px);
  }
}


/*** nav ***/
.menu-hokkaido {
  border-bottom: 1px solid #F2F1EF;
}

.hokkaido--desknav {
  text-align: center;
}

.hokkaido--desknav .navbar-center {
  list-style: none;
  padding: 1.2rem 0;
  margin-bottom: 0;
}

.hokkaido--desknav .navbar-center > li a {
  font-size: 1.8rem;
  color: #222;
  padding: 0;
}

  .hokkaido--desknav .navbar-center > li {
    margin: 1.2rem 0;
  }

.hokkaido--desknav .navbar-center > li a:hover, 
.hokkaido--desknav li a:focus {
  color: #D9B064;
  background-color: #fff;
  text-decoration: none;
}

@media (min-width: 768px) {
  .hokkaido--desknav .navbar-center {
    display: inline-flex;
    align-items: center;    
    padding: 2.4rem 0;
  }

  .hokkaido--desknav .navbar-center > li {
    margin: 0;
  }

  .hokkaido--desknav .navbar-center > li:not(:first-child) {
    margin-left: 3rem;
  }
}










.discover-hokkaido {
  padding: 4.4rem 0 ;
}

.regions-hokkaido {
  padding: 0 0 8rem 0;
}

.regions-hokkaido > div:first-child {
  margin-top: 0;
}

.regions-hokkaido > div {
  margin-top: 6rem;
}

.intro__title {
  font-size: 3.6rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
}
.intro__subtitle {
  font-weight: 400;
  font-size: 2rem;
  line-height: 2;
  color: #757575;
}
.intro__desc {
  font-weight: normal;
  font-size: 18px;
  line-height: 1.5;
}

.region__desc {
  margin: 3.2rem 0 3.6rem 0;
  /*font-family: "Proxima Nova", sans-serif;*/
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 1.5;
}

.desc__title {
  font-weight: bold;
  /*font-family: "Proxima Nova", sans-serif;*/
  font-size: 1.8rem;
  line-height: 1.5;
  color: #222;
}

.desc_vehicle {
  font-weight: normal;
  /*font-family: "Proxima Nova", sans-serif;*/
  font-size: 1.8rem;
  line-height: 1.2;
}

.intro__visual {
  overflow: hidden;
}

.intro__map {
  position: relative;
  width: initial;
}

.map__map {
  width: 125%;
  display: block;
  stroke: #fff;
  stroke-width: 0.4px;
}

.map__spot--destination-okushiri {
  bottom: 23%;
  left: 1%;
}

.map__spot--destination-rishiri {
  top: 6%;
  left: 30%;
}

.map__spot--destination-hakodate {
  bottom: 16%;
  left: 23%;
}

.map__spot--destination-sapporo-okadama {
  top: 54%;
  left: 23%;
}

@media (max-width: 360px) {
  .map__spot--destination-sapporo-okadama {
    top: 50%;
    left: 14%;
  }
}

.map__spot--destination-sapporo-okadama .map__spot__plane-marker {
  margin-left: 6rem;
  margin-top: .5rem;
}

.map__spot--destination-new-chitose {
  top: 68%;
  left: 32%;
}

.map__spot--destination-new-chitose .map__spot__marker {
  margin-left: 2rem;
  margin-top: -0.5rem;
}

.map__spot--destination-asahikawa {
  top: 43%;
  left: 45%;
}

.map__spot--destination-asahikawa .map__spot__marker {
  margin-left: 2.5rem;
  /*margin-top: -0.5rem;*/
}

.map__spot--destination-obihiro {
  top: 63%;
  right: 41%;
}

.map__spot--destination-kushiro {
  top: 62%;
  right: 30%;
}

.map__spot--destination-memanbetsu {
  top: 42%;
  right: 26%;
}

@media (min-width: 700px) {
  .map__spot--destination {
    display: block;
  }
}

.map__spot--destination {
  height: 1em;
  width: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  display: none;
}

.map__spot {
  display: block;
  position: absolute;
  height: 4px;
  width: 4px;
  line-height: 1.125;
}

.map__spot:hover,
.map__spot:focus {
  text-decoration: none;
}

.map__spot__label {
  width: max-content;
  font-weight: normal;
  font-size: 1.541rem;
  line-height: 1.2;
  color: #222;
}

.map__spot__marker {
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.map__spot:hover .map__spot__marker {
  background: rgba(216, 102, 100, 0.4);
}

.map__spot__marker .map__spot__plane-marker {
  margin: auto;
  height: 1.6rem;
  width: 1.6rem;
  background: #CC0000;
  border-radius: 50%;
}

.map__spot__plane-marker i {
  color: #ffffff;
  transform: rotate(-90deg);
  font-size: 0.8rem;
}

.map__spot__plane-marker {
  height: 1.6rem;
  width: 1.6rem;
  background: #111111;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: 1rem;
}

.map__spot__label--right {
  margin-left: -1rem;
}

.regions-hokkaido--img {
  width: 100%;
  height: 100%;
}


.image__area { 
  background: #F2F1EF; 
  padding: 0; 
}

.airport__title {
  font-weight: bold;
  font-size: 2rem;
  margin: 1.2rem 0;
  margin-top: 2.8rem;
}

.map__area-details {
  border-bottom: 1px solid #8C713F;
}

.airport__discover--btn {
  width: 100%;
  height: auto;
  background: #8C713F;
  border-radius: 4px;
  color: #ffffff !important;
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  font-weight: normal;
  font-size: 1.3rem;
}

.airport__discover--flights {
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  font-weight: normal;
  font-size: 1.3rem;
  color: #614e2c;
}

.map--image { margin: 2.8rem 8rem; }

.regions--cards { margin-top: 6.2rem; }

.regions--cards-section {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.regions__cta {
    display: inline-block;    
    font-size: 1.68rem;
    font-weight: 700;
    line-height: 1.25;    
    color: #856514;    
    text-transform: uppercase;
}

.regions__cta:hover,
.regions__cta:focus {
  color: #856514;
}

@media (max-width: 767px) {
  .regions__cta {
    margin-top: 4rem;
  }
}

@media (min-width: 992px) {

  .discover-hokkaido {
    padding: 7.6rem 0 ;
  }

  .intro__content {
    margin-top: 10%;
  }


  .image__area { height: 45.8rem; }
}

.regions__title {
  /*font-family: "Proxima Nova", sans-serif;*/
  margin-top: 0;
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.17;
  color: #222;
}

.access-hokkaido .access-hokkaido--title {
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  font-weight: bold;
  font-size: 3.1rem;
  line-height: 1.4;
  color: #404040;
}

.access-hokkaido .access-hokkaido--desc {
  /*font-family: "Proxima Nova", sans-serif;*/
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 1.7;
  color: #222;
}

@media (max-width: 767px) {
  .access-hokkaido--cta {
    display: block !important;
    text-align: center;
  }
}

.access-hokkaido .access-hokkaido--cta {
    font-family: 'Montserrat', 'source sans pro', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .34px;
    text-transform: uppercase;
    padding: 13px 58px;
    padding: 13px 32px;
    background-color: #8C713F;
    color: #fff;
    border-radius: 4px;    
    display: inline-block;
    transition: all 0.2s ease 0s;
    margin-top: 3.2rem;
    margin-bottom: .8rem;
}






/* mg css */
/******** Interactive map *******/
.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(204, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(204, 0, 0, 0);
  }
}


/********** areas *********/


.airport__table {
  font-size: 1.8rem;
  width: 100%;
  margin-top: .8rem;
}

.airport__table th, td {
  padding: .8rem 0;
}

.airport__table th {
  font-weight: 600;
}

.airport__table td {
  text-align: right;
}

.region--image {
  background-color: #F2F1EF;
  position: relative;
  height: 460px;
}

.region__title {
  position: absolute;
  font-size: 4.8rem;
  font-weight: 700;
  bottom: 1.6rem;
  color: #fff;
}

.region__tagline {
  position: absolute;
  font-size: 1.8rem;
  font-weight: 700;
  bottom: 7.2rem;
  color: #fff;
}

.region__title,
.region__tagline {
  left: 15px;
}

.jal-hk-region:not(:first-child) {
  margin-top: 180px;
}

.region--image img {
  width: 100%;
  object-fit: cover;
}

.map--image {
  margin: 0;
  max-width: 16rem;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.map--image-mask {
  width: 16rem;
  height: 12.6rem;
  position: relative;
}

.airport__discover {
  margin-top: 4rem;
  text-align: center;
}

.airport__discover--btn {
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  display: inline-block;
  background: #8C713F;
  border-radius: 4px;
  padding: 13px 58px;
  font-weight: 400;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase;
}

.airport__flights {
  text-align: center;
  margin-top: 2.4rem;
  border: 1px solid #8C713F;
  border-radius: 4px;
}

.airport__discover--flights {
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  display: inline-block;
  background: transparent;
  border-radius: 4px;
  /*padding: 0;*/
  padding: 13px 58px;
  font-weight: 400;
  color: #614e2c;
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  height: auto;
}

.airport__discover--flights:hover,
.airport__discover--flights:focus {
  color: #614e2c;
}

.image__area {
  margin-top: 2.8rem;
  padding: 2.8rem;
}

.region__direct {
  margin-left: 2em;
  font-size: 1.8rem;
  line-height: 1.25;
}

.region__direct > li {
  margin-bottom: 1.6rem;
  line-height: 27px;
}


@media (max-width: 767px) {
  .region--image {
    margin-left: -15px;
    width: calc(100% + 30px);
  }
}

@media (max-width: 670px) {
    
    .map__spot--destination-sapporo-okadama {
    top: 52%;
    left: 17%;
    }
    .map__spot--destination-new-chitose {
    top: 68%;
    left: 30%;
    }
    .map__spot--destination-memanbetsu {
    top: 42%;
    right: 27%;
    }
    .map__spot--destination-asahikawa {
      top: 41%;
      left: 43%;
    }
    .map__spot--destination-obihiro {
    top: 62%;
    right: 42%;
    }
}

@media (min-width: 670px) and (max-width: 991px)  {
    .map__spot--destination-sapporo-okadama {
    top: 56%;
    left: 26%;
    }
    .map__spot--destination-hakodate {
    bottom: 13%;
    left: 23%;
    }
    .map__spot--destination-memanbetsu {
    top: 42%;
    right: 26%;
    }
    .map__spot--destination-asahikawa {
      top: 42%;
      left: 45%;
    }
    .map__spot--destination-obihiro {
    top: 65%;
    right: 42%;
    }

}


@media (min-width: 992px) {
  .region--image {
    /* minus half screen + half container */
    margin-left: calc(-50vw + 476px);
  }

  .region__title,
  .region__tagline {
    left: calc(50vw - 485px + (15px / 2));
  }

  .image__area {
    margin-top: 0;
    height: 46rem;
  }
}

@media (min-width: 1200px) {
  .region--image {
    margin-left: calc(-50vw + 553px);
  }

  .region__title,
  .region__tagline {
    left: calc(50vw - 563px + (15px / 2));
  }
}

/********  access map *******/
.access-hokkaido--flex {
  display: flex;
  flex-direction: column;
}

.access-hokkaido--flex-1 {
  z-index: 2;
  order: 2;
}

.access-hokkaido--flex-2 {
  order: 1;
}

.access-hokkaido__map {
  z-index: -1;
}

@media (min-width: 992px) {
  .access-hokkaido__map {
    margin-top: -26rem;
  }

  .access-hokkaido--flex-1 {
    order: 1;
  }

  .access-hokkaido--flex-2 {
    order: 2;
  }
}



/********* explore ********/
.explorer-hokkaido {
  margin-top: 6rem;
  position: relative;
  padding: 8rem 0;
}

.explorer-hokkaido:before {
  content: "";
  width: 100%;
  background-color: #F0EFED;
  padding-top: 33.3%;
  position: absolute;
  right: 0;
  top: 0;
}

.explorer-hokkaido.mirror:before {
  left: 0;
}

.explorer-hokkaido__title {
  font-size: 2.8rem;
  font-weight: bold;
}

.explorer-hokkaido__copy {
  margin-top: 2.4rem;
  font-size: 1.8rem;
  line-height: 1.5;
}

.explorer-hokkaido__cta {
  margin-top: 3.2rem;
}

.explorer-hokkaido__button {
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .34px;
  text-transform: uppercase;
  padding: 13px 58px;
  padding: 13px 32px;
  background-color: #8C713F;
  color: #fff;
  border-radius: 4px;
  display: block;
  transition: all 0.2s ease 0s;
  text-align: center;
  margin-bottom: 1.2rem;
}

.explorer-hokkaido__button:hover,
.explorer-hokkaido__button:focus {
  color: #fff;
  background-color: #8C713F;
}

.explorer-hokkaido__button--secondary {
  color: #6b562f;
  background-color: #fff;
}

a.explorer-hokkaido__button.explorer-hokkaido__button--secondary {
    border: 1px solid #8C713F;
    border-radius: 4px;
    margin-left: .2em;
}

@media (max-width: 767px) {

  a.explorer-hokkaido__button.explorer-hokkaido__button--secondary {
      margin-left: 0;
      margin-top: 2.4rem;
  }

}

.explorer-hokkaido__button--secondary:hover,
.explorer-hokkaido__button--secondary:focus {
  color: #6b562f;
  background-color: #fff;
}

.explorer-hokkaido__img-mask {
  position: relative;
  padding-top: 66.6%;
  overflow: hidden;
/*  background-color: #fff;*/
}

.explorer-hokkaido__img-mask > img {
  position: absolute;
  top: 0;
}

@media (min-width: 768px) {
  .explorer-hokkaido__button {
    display: inline-block;
    margin-bottom: 0;

  }
}


@media (min-width: 992px) {
  .explorer-hokkaido {
    margin-top: 0;
  }

  .explorer-hokkaido:before {
    padding-top: 0;
    height: 100%;
    width: calc(50vw - 563px + 382px);
  }

  .explorer-hokkaido--flex {
    display: flex;
    flex-direction: row;
  }

  .explorer-hokkaido--flex-reverse {
      display: flex;
      flex-direction: row-reverse;
  }

  .explorer-hokkaido__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .explorer-hokkaido__button {
    display: inline-block;
    /*padding: 13px 28px;*/
  }
}

/*@media (min-width: 1200px) {
  .explorer-hokkaido__button {
    padding: 13px 48px;
  }
}*/






/* CSS for JAL cards */
.jal-ttd__card-img {
  position: absolute;
  top: 0;
  vertical-align: bottom;
  width: 100%;
}

.jal-ttd__card-cat {
    font-size: 1.17rem;
    text-transform: uppercase;
    color: #696969;
    font-family: 'Montserrat', 'source sans pro', sans-serif;
    font-weight: 700;
}

.jal-ttd__card-location {    
    color: #757575;
    font-size: 1.68rem;
    position: absolute;
    left: 22px;
    bottom: 24px;
}

.jal-ttd__card-title {
  font-family: 'Montserrat', 'source sans pro', sans-serif;
  font-style: normal;
  font-weight: 700;  
  line-height: 1.1;
  font-size: 2rem;    
  margin-top: 5px;
  margin-bottom: 0; 
}

.jal-ttd__card:not(:first-child) {
  margin-top: 2rem;
}

.lead-banner-section {
  margin-top: 6rem;
  margin-bottom: 10rem;
}

.lead-banner {
  max-width: 728px;
  margin: 0 auto;
  display: block;
}

.lead-banner__mask {
  position: relative;
  padding-top: calc((90/728) * 100%);
}

.lead-banner__mask img {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 768px) {
  .jal-ttd__card-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      text-overflow: ellipsis;
      overflow: hidden;
  }
}

@media (min-width: 992px) {
  .jal-ttd__card-inner {
    min-height: 17rem;
  }
}

@media (min-width: 768px) {
  .jal-ttd__thumb-box {
    display: flex;
  }
  .jal-ttd__card {
    width: 32%;    
    margin-top: 0 !important;
  }

  .jal-ttd__card:not(:first-child) {
    margin-left: 20px;
  }
}

.jal-ttd__card-mask {
  box-shadow: 0 0 10px #ccc;
}
.jal-ttd__card-inner {
  box-shadow: 0 4px 8px #ccc;
  min-height: 200px;
}

.jal-ttd__card-inner:hover,
.jal-ttd__card-inner:focus {
  color: inherit;
  text-decoration: none;
}
.jal-ttd__thumb-box {
  list-style: none;
  padding: 0;
}

.jal-ttd__card-mask {
  position: relative;
  padding-top: 56.25%;
}

.jal-ttd__card-inner {
  position: relative;
  display: block;
  background: #fff;
  width: 88%;
  min-height: 170px;
  padding: 22px 24px;
  margin: -40px 0 0 auto;
  padding-bottom: calc(24px + 1em);
  color: #333;
  max-height: 152px;
}