/* ===================================================================
CSS information

 file name  : feature.css
 author     : Ability Consultant
 style info : What is Halekulani Okinawa Wedding
=================================================================== */
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}
.con_pgtitle .inner, .con_ltr, .con_rtl {
  max-width: 1280px;
  margin: auto;
  width: 95%;
}

/*Animate */
/* -----------------------------------------------------------
	setting
----------------------------------------------------------- */
.st_basic {
  font-weight: normal;
  text-align: center;
  color: #010101;
}
.st_basic .jp {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.4em;
}
@media only screen and (max-width: 767px) {
  .st_basic .jp {
    font-size: 88%;
    letter-spacing: 0.2em;
  }
}
.st_basic .jp.small {
  font-size: 88%;
  letter-spacing: 0.2em;
}
.st_basic .en {
  display: block;
  font-family: "Playfair Display", serif;
  letter-spacing: 0.1em;
  font-size: 225%;
}
@media only screen and (max-width: 767px) {
  .st_basic .en {
    font-size: 144%;
    letter-spacing: 0.05em;
  }
}
.st_basic.bd {
  position: relative;
  padding-top: 3em;
}
@media only screen and (max-width: 767px) {
  .st_basic.bd {
    padding-top: 2em;
  }
}
.st_basic.bd:before {
  content: "";
  height: 4px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #BEA67C;
}
@media only screen and (max-width: 767px) {
  .st_basic.bd:before {
    width: 50px;
  }
}

.con_main {
  text-align: center;
}
@media only screen and (min-width: 1025px) {
  .con_main {
    width: 100%;
  }
}
@media print {
  .con_main {
    width: 100%;
  }
}
.ie8 .con_main {
  width: 100%;
}

.con_pgtitle {
  max-width: 1920px;
  text-align: center;
  position: relative;
  padding: 0;
  margin-bottom: 10.38462rem;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_pgtitle {
    margin-bottom: 7.69231rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_pgtitle {
    margin-bottom: 6.15385rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_pgtitle {
    margin-top: 6em;
  }
}
@media only screen and (max-width: 767px) {
  .con_pgtitle {
    margin-top: 4em;
  }
}
.con_pgtitle.center {
  text-align: center;
}
.con_pgtitle .inner {
  max-width: 902px;
}
.con_pgtitle .inner h1,
.con_pgtitle .inner h2,
.con_pgtitle .inner h3,
.con_pgtitle .inner h4 {
  font-weight: normal;
  color: #010101;
  padding: 12.30769rem 0;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_pgtitle .inner h1,
  .con_pgtitle .inner h2,
  .con_pgtitle .inner h3,
  .con_pgtitle .inner h4 {
    padding: 4.61538rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .con_pgtitle .inner h1,
  .con_pgtitle .inner h2,
  .con_pgtitle .inner h3,
  .con_pgtitle .inner h4 {
    padding: 4.61538rem 0;
  }
}
.con_pgtitle .inner h1 .small,
.con_pgtitle .inner h2 .small,
.con_pgtitle .inner h3 .small,
.con_pgtitle .inner h4 .small {
  font-size: 150%;
  display: block;
  line-height: 1;
  font-family: "Playfair Display", serif;
  font-style: italic;
}
.con_pgtitle .inner h1 .en,
.con_pgtitle .inner h2 .en,
.con_pgtitle .inner h3 .en,
.con_pgtitle .inner h4 .en {
  font-family: "Playfair Display", serif;
  font-size: 225%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .con_pgtitle .inner h1 .en,
  .con_pgtitle .inner h2 .en,
  .con_pgtitle .inner h3 .en,
  .con_pgtitle .inner h4 .en {
    font-size: 7vw;
    line-height: 1.3em;
  }
}
.con_pgtitle .inner h1 .jp,
.con_pgtitle .inner h2 .jp,
.con_pgtitle .inner h3 .jp,
.con_pgtitle .inner h4 .jp {
  font-family: "Playfair Display", serif;
  font-size: 113%;
  letter-spacing: 0.4em;
  display: block;
}
@media only screen and (max-width: 767px) {
  .con_pgtitle .inner h1 .jp,
  .con_pgtitle .inner h2 .jp,
  .con_pgtitle .inner h3 .jp,
  .con_pgtitle .inner h4 .jp {
    font-size: 4vw;
  }
}
.con_pgtitle .inner h1::before,
.con_pgtitle .inner h2::before,
.con_pgtitle .inner h3::before,
.con_pgtitle .inner h4::before {
  content: "";
  width: 46.56319%;
  height: 404px;
  position: absolute;
  background: url(../wedding/feature/images/img_logo_large.jpg) center center/contain no-repeat;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body#privacy_policy .con_pgtitle .inner h1 .en, body#notice .con_pgtitle .inner h1 .en {
  letter-spacing: 0;
}
.con_pgtitle .inner .txt {
  letter-spacing: 0.3em;
  line-height: 1.875;
  background: #fff;
  margin-top: 7.69231rem;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_pgtitle .inner .txt {
    margin-top: 6.15385rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_pgtitle .inner .txt {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .con_pgtitle .inner .txt {
    font-size: 88%;
    text-align: left;
  }
}

.con_ltr,
.con_rtl {
  margin-bottom: 180px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr,
  .con_rtl {
    margin-bottom: 140px;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr,
  .con_rtl {
    margin-bottom: 80px;
  }
}
.con_ltr .box_img,
.con_rtl .box_img {
  position: relative;
}
.con_ltr .box_img::before,
.con_rtl .box_img::before {
  content: "";
  width: 0;
  height: 100%;
  background: #e3f6ff;
  position: absolute;
  top: 0;
  z-index: 1;
}
.con_ltr .box_img ul,
.con_rtl .box_img ul {
  display: none;
}
.con_ltr .box_img ul.slick-initialized,
.con_rtl .box_img ul.slick-initialized {
  display: block;
}
.con_ltr .box_img ul .slick-dots,
.con_rtl .box_img ul .slick-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  z-index: 5;
  line-height: 0;
  text-align: right;
  right: 1em;
}
.con_ltr .box_img ul .slick-dots li,
.con_rtl .box_img ul .slick-dots li {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin-left: 15px;
  background: #eff6f8;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr .box_img ul .slick-dots li,
  .con_rtl .box_img ul .slick-dots li {
    margin-left: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_img ul .slick-dots li,
  .con_rtl .box_img ul .slick-dots li {
    margin-left: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_img ul .slick-dots li,
  .con_rtl .box_img ul .slick-dots li {
    width: 8px;
    height: 8px;
  }
}
.con_ltr .box_img ul .slick-dots li:first-child,
.con_rtl .box_img ul .slick-dots li:first-child {
  margin-left: 0;
}
.con_ltr .box_img ul .slick-dots li::before,
.con_rtl .box_img ul .slick-dots li::before {
  content: "";
  width: 0;
  height: 1px;
  background: #5ea4bf;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr .box_img ul .slick-dots li::before,
  .con_rtl .box_img ul .slick-dots li::before {
    left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_img ul .slick-dots li::before,
  .con_rtl .box_img ul .slick-dots li::before {
    left: 8px;
  }
}
.con_ltr .box_img ul .slick-dots li button,
.con_rtl .box_img ul .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 5.5px;
  text-indent: -9999px !important;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_img ul .slick-dots li button,
  .con_rtl .box_img ul .slick-dots li button {
    width: 8px;
    height: 8px;
  }
}
.con_ltr .box_img ul .slick-dots li button:focus,
.con_rtl .box_img ul .slick-dots li button:focus {
  outline: none;
}
.con_ltr .box_img ul .slick-dots li.slick-active,
.con_rtl .box_img ul .slick-dots li.slick-active {
  border-radius: 50%;
  background: #5ea4bf;
  position: relative;
}
.con_ltr .box_img ul .slick-dots li.slick-active::before,
.con_rtl .box_img ul .slick-dots li.slick-active::before {
  animation: sld_dots 3s linear forwards;
}
@keyframes sld_dots {
  0% {
    width: 0;
  }
  100% {
    width: 150%;
  }
}
.con_ltr .box_img ul .slick-slide,
.con_rtl .box_img ul .slick-slide {
  overflow: hidden;
}
.con_ltr .box_img ul .slick-slide:focus,
.con_rtl .box_img ul .slick-slide:focus {
  outline: none;
}
.con_ltr .box_img ul .slick-slide img,
.con_rtl .box_img ul .slick-slide img {
  position: relative;
}
.con_ltr .box_img ul .slick-slide.slick-active img,
.con_rtl .box_img ul .slick-slide.slick-active img {
  animation: sld_img 2s linear forwards;
}
@keyframes sld_img {
  0% {
    opacity: 0;
    left: 2em;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.con_ltr {
  max-width: 1600px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr {
    align-items: flex-start;
  }
}
.con_ltr .box_img {
  width: 56.25%;
}
@media only screen and (max-width: 1024px) {
  .con_ltr .box_img {
    order: 1;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3em;
  }
}
.con_ltr .box_img::before {
  right: 0;
}
.con_ltr .box_detail {
  width: 32.8125%;
  margin-left: 10.9375%;
}
@media only screen and (max-width: 1024px) {
  .con_ltr .box_detail {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    order: 2;
  }
}
.con_ltr .box_detail .st_basic {
  text-align: left;
  margin-bottom: 3.07692rem;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr .box_detail .st_basic {
    margin-bottom: 2.30769rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_detail .st_basic {
    margin-bottom: 1.53846rem;
  }
}
@media only screen and (max-width: 1024px) {
  .con_ltr .box_detail .st_basic {
    line-height: 1;
  }
}
.con_ltr .box_detail .ttl {
  font-size: 138%;
  letter-spacing: 0.3em;
  font-weight: normal;
  font-family: "Playfair Display", serif;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr .box_detail .ttl {
    font-size: 125%;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_detail .ttl {
    font-size: 113%;
  }
}
.con_ltr .box_detail .txt {
  margin-top: 1.92308rem;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_ltr .box_detail .txt {
    margin-top: 0.38462rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_ltr .box_detail .txt {
    margin-top: 0.76923rem;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .con_ltr .box_detail .txt {
    font-size: 88%;
  }
}
@media print {
  .con_ltr .box_detail .txt {
    font-size: 88%;
  }
}
.ie8 .con_ltr .box_detail .txt {
  font-size: 88%;
}

.con_rtl {
  max-width: 1600px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_rtl {
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .con_rtl {
    align-items: flex-start;
  }
}
.con_rtl .box_detail {
  width: 32.8125%;
  margin-right: 10.9375%;
}
@media only screen and (max-width: 1024px) {
  .con_rtl .box_detail {
    order: 2;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}
.con_rtl .box_detail .st_basic {
  text-align: left;
  margin-bottom: 3.07692rem;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_rtl .box_detail .st_basic {
    margin-bottom: 2.30769rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_rtl .box_detail .st_basic {
    margin-bottom: 1.53846rem;
  }
}
@media only screen and (max-width: 1024px) {
  .con_rtl .box_detail .st_basic {
    line-height: 1;
  }
}
.con_rtl .box_detail .ttl {
  font-size: 138%;
  letter-spacing: 0.3em;
  font-weight: normal;
  font-family: "Playfair Display", serif;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_rtl .box_detail .ttl {
    font-size: 125%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rtl .box_detail .ttl {
    font-size: 113%;
  }
}
.con_rtl .box_detail .txt {
  margin-top: 1.92308rem;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .con_rtl .box_detail .txt {
    margin-top: 0.38462rem;
  }
}
@media only screen and (max-width: 767px) {
  .con_rtl .box_detail .txt {
    margin-top: 0.76923rem;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .con_rtl .box_detail .txt {
    font-size: 88%;
  }
}
@media print {
  .con_rtl .box_detail .txt {
    font-size: 88%;
  }
}
.ie8 .con_rtl .box_detail .txt {
  font-size: 88%;
}
.con_rtl .box_img {
  width: 56.25%;
}
@media only screen and (max-width: 1024px) {
  .con_rtl .box_img {
    order: 1;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3em;
  }
}
.con_rtl .box_img::before {
  left: 0;
}
.con_rtl .box_img ul {
  display: none;
}
.con_rtl .box_img ul.slick-initialized {
  display: block;
}

@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .cuisine .box_detail {
    width: 37.5%;
    margin-left: 6.25%;
  }
}
@media print {
  .cuisine .box_detail {
    width: 37.5%;
    margin-left: 6.25%;
  }
}
.ie8 .cuisine .box_detail {
  width: 37.5%;
  margin-left: 6.25%;
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .cuisine .box_img {
    width: 56.25%;
  }
}
@media print {
  .cuisine .box_img {
    width: 56.25%;
  }
}
.ie8 .cuisine .box_img {
  width: 56.25%;
}

@media only screen and (min-width: 1025px) {
  .brides .box_detail {
    width: 30.1875%;
    margin-right: 6.875%;
    margin-left: 6.25%;
  }
}
@media print {
  .brides .box_detail {
    width: 30.1875%;
    margin-right: 6.875%;
    margin-left: 6.25%;
  }
}
.ie8 .brides .box_detail {
  width: 30.1875%;
  margin-right: 6.875%;
  margin-left: 6.25%;
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .brides .box_detail {
    width: 33.75%;
  }
}
@media print {
  .brides .box_detail {
    width: 33.75%;
  }
}
.ie8 .brides .box_detail {
  width: 33.75%;
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .brides .box_img {
    width: 52.5%;
  }
}
@media print {
  .brides .box_img {
    width: 52.5%;
  }
}
.ie8 .brides .box_img {
  width: 52.5%;
}

@media only screen and (min-width: 1025px) {
  .flowr .box_detail {
    margin-right: 0%;
    margin-left: 6.25%;
  }
}
@media print {
  .flowr .box_detail {
    margin-right: 0%;
    margin-left: 6.25%;
  }
}
.ie8 .flowr .box_detail {
  margin-right: 0%;
  margin-left: 6.25%;
}

@media only screen and (min-width: 1025px) {
  .paper .box_detail {
    width: 27.25%;
    margin-right: 15.625%;
    margin-left: 12.5%;
  }
}
@media print {
  .paper .box_detail {
    width: 27.25%;
    margin-right: 15.625%;
    margin-left: 12.5%;
  }
}
.ie8 .paper .box_detail {
  width: 27.25%;
  margin-right: 15.625%;
  margin-left: 12.5%;
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .paper .box_detail {
    width: 31.25%;
    margin-right: 12.5%;
  }
}
@media print {
  .paper .box_detail {
    width: 31.25%;
    margin-right: 12.5%;
  }
}
.ie8 .paper .box_detail {
  width: 31.25%;
  margin-right: 12.5%;
}
@media only screen and (min-width: 1025px) {
  .paper .box_img {
    width: 43.75%;
  }
}
@media print {
  .paper .box_img {
    width: 43.75%;
  }
}
.ie8 .paper .box_img {
  width: 43.75%;
}

@media only screen and (min-width: 1025px) {
  .spa .box_detail {
    width: 27.25%;
    margin-right: 0;
    margin-left: 10%;
  }
}
@media only screen and (min-width: 1025px) and (min-width: 1025px) and (max-width: 1399px) {
  .spa .box_detail {
    width: 28.75%;
  }
}
@media only screen and (min-width: 1025px) {
  .ie8 .spa .box_detail {
    width: 28.75%;
  }
}
@media print {
  .spa .box_detail {
    width: 27.25%;
    margin-right: 0;
    margin-left: 10%;
  }
}
@media print {
  .spa .box_detail {
    width: 28.75%;
  }
}
@media print {
  .ie8 .spa .box_detail {
    width: 28.75%;
  }
}
.ie8 .spa .box_detail {
  width: 27.25%;
  margin-right: 0;
  margin-left: 10%;
}
@media only screen and (min-width: 1025px) and (max-width: 1399px) {
  .ie8 .spa .box_detail {
    width: 28.75%;
  }
}
@media print {
  .ie8 .spa .box_detail {
    width: 28.75%;
  }
}
.ie8 .ie8 .spa .box_detail {
  width: 28.75%;
}
@media only screen and (min-width: 1025px) {
  .spa .box_img {
    width: 43.75%;
    margin-left: 6.625%;
  }
}
@media print {
  .spa .box_img {
    width: 43.75%;
    margin-left: 6.625%;
  }
}
.ie8 .spa .box_img {
  width: 43.75%;
  margin-left: 6.625%;
}

.btn_basic a > span {
  z-index: 9;
}